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

Question

0

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()?