Next JS Seo with static pages SSR Pages and Client Side rendering

0 votes

I am using Apollo GraphQL with Next JS, and there are three ways I can go about querying my data and rendering it. One is using Static Rendering, using getStaticProps() looking something like this.

export async function getStaticProps() {
    const { data } = await client.query({
      query: gql`
        query Countries {
          countries {
            code
            name
            emoji
          }
        }
      `,
    });

    return {
      props: {
        countries: data.countries.slice(0, 4),
      },
   };
}

This is just fine but I can also use getServerSideProps like so

export async function getServerSideProps() {
  const { data } = await client.query({
    query: gql`
      query Countries {
        countries {
          code
          name
          emoji
        }
      }
    `,
  });

  return {
    props: {
      countries: data.countries.slice(0, 4),
    },
  };
}

and Finally I can use client side rendering with

function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

// components/ClientOnly.js

import { useEffect, useState } from "react";

export default function ClientOnly({ children, ...delegated }) {
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  if (!hasMounted) {
    return null;
  }

  return <div {...delegated}>{children}</div>;
}

// components/Countries.js

import { useQuery, gql } from "@apollo/client";
import styles from "../styles/Home.module.css";

const QUERY = gql`
  query Countries {
    countries {
      code
      name
      emoji
    }
  }
`;

export default function Countries() {
  const { data, loading, error } = useQuery(QUERY);

  if (loading) {
    return ...
  }

  if (error) {
    console.error(error);
    return null;
  }

  const countries = data.countries.slice(0, 4);

  return (
    <div className={styles.grid}>
      {countries.map((country) => (
        ...
          <p>
            {country.code} - {country.emoji}
          </p>
        </div>
      ))}
    </div>
  );
}

The problem arises when I want to be performant in the sense that, let's say my home page has some static content that won't be updated that much, so I can use getStaticProps() but it will also require some data that needs getServerSideProps() because the data will be changing quite often.

With next you cannot use them in combination with each other on the same page, so my thought was I could use them with a client rendered component like <ClientOnly><Countries></ClientOnly> but I've been reading that the code done client rendered won't be read by SEO.

I guess I am just worried about doing everything via getServerSiderProps() because I would think there could be a lot of requests, so I would try and design the code to use static and dynamic, but I would still want SEO to work properly. This issue is outlined partially in NEXT JS github here https://github.com/vercel/next.js/discussions/11424

Any ideas would be greatly appreciated.

Should I just fetch all my queries through getServerSideProps()?

Feb 24 in Others by Kichu
• 16,050 points
23 views

1 answer to this question.

0 votes
use getStaticProps() with the revalidate property that triggers the ISR functionality do this if you have no problem with displaying cached content
and if seo is important avoid getServerSideProps().
https://vercel.com/docs/next.js/incremental-static-regeneration use this for more details on this
answered Feb 25 by narikkadan
• 7,860 points

Related Questions In Others

0 votes
0 answers
0 votes
1 answer
0 votes
1 answer

How implement SEO (Metatags) in Angular 2 (with Angular universal for rendering on server side)?

 in this https://github.com/angular/universal-starter you can see  angular-meta.ts service that handles ...READ MORE

answered Feb 26 in Others by narikkadan
• 7,860 points
87 views
0 votes
1 answer

How to set meta tags using Angular universal SSR and ngx-seo plug-in?

first Install the plug-in with npm i ngx-seo ...READ MORE

answered Feb 11 in Others by narikkadan
• 7,860 points
318 views
0 votes
1 answer

How to use next-seo for setting nextjs meta tag with multiple OGP images?

https://github.com/garmeeh/next-seo use this git repo that contains ...READ MORE

answered Feb 24 in Others by narikkadan
• 7,860 points
72 views
0 votes
1 answer

Facebook debugger does not pick up Next.js next-seo meta tags

It's a common pattern to have a ...READ MORE

answered Feb 26 in Others by narikkadan
• 7,860 points
711 views
0 votes
0 answers

Reactjs fetch data from API and google SEO problem

My website create with ReactJS and all ...READ MORE

Mar 4 in Digital Marketing by Kichu
• 16,050 points
24 views
0 votes
1 answer

Error:Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Hello @kartik, It is happening because any where ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,680 points
1,694 views
0 votes
1 answer

Next JS Seo with static pages, SSR Pages and Client Side rendering

Use getStaticProps()  with a revalidate property because sites ...READ MORE

answered Feb 20 in Others by narikkadan
• 7,860 points
136 views
0 votes
1 answer

How implement SEO (Metatags) in Angular 2 (with Angular universal for rendering on server side)?

https://github.com/angular/universal-starter follow this repo among it there ...READ MORE

answered Feb 22 in Others by narikkadan
• 7,860 points
56 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP