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, 2022 in Others by Kichu
• 19,050 points
1,279 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, 2022 by narikkadan
• 63,420 points

Related Questions In Others

0 votes
0 answers

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

I'm searching a fully working example about ...READ MORE

Feb 21, 2022 in Others by Kichu
• 19,050 points
633 views
0 votes
1 answer

Laravel , Blade & React js add the meta tag for rendering on server side SEO

use septia laravel side rendering and add ...READ MORE

answered Feb 24, 2022 in Others by narikkadan
• 63,420 points
1,376 views
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, 2022 in Others by narikkadan
• 63,420 points
472 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, 2022 in Others by narikkadan
• 63,420 points
1,889 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, 2022 in Others by narikkadan
• 63,420 points
4,659 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, 2022 in Others by narikkadan
• 63,420 points
4,295 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, 2022 in Digital Marketing by Kichu
• 19,050 points
365 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,880 points
2,205 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, 2022 in Others by narikkadan
• 63,420 points
741 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, 2022 in Others by narikkadan
• 63,420 points
869 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP