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

0 votes

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

Feb 19 in Others by Kichu
• 17,220 points
158 views

1 answer to this question.

0 votes

Use getStaticProps()  with a revalidate property because sites can use cache until the build a new one in some cases 

ISR will be triggered when you use this  for more details use this article https://vercel.com/docs/next.js/incremental-static-regeneration

answered Feb 20 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
94 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
355 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
93 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
805 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
• 17,220 points
26 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,701 views
0 votes
1 answer

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

use getStaticProps() with the revalidate property that ...READ MORE

answered Feb 25 in Others by narikkadan
• 7,860 points
27 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
67 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