Next 带有静态页面、SSR 页面和客户端渲染的 JS Seo答案

【问题标题】：Next JS Seo with static pages, SSR Pages and Client Side renderingNext 带有静态页面、SSR 页面和客户端渲染的 JS Seo
【发布时间】：2021-11-03 00:36:14
【问题描述】：

我正在将 Apollo GraphQL 与 Next JS 一起使用，我可以通过三种方式查询我的数据并呈现它。一种是使用静态渲染，使用 getStaticProps() 看起来像这样。

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),
      },
   };
}

这很好，但我也可以像这样使用getServerSideProps

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),
    },
  };
}

最后我可以使用客户端渲染

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>
  );
}

当我想提高性能时，问题就出现了，假设我的主页有一些不会更新太多的静态内容，所以我可以使用getStaticProps()，但它也需要一些数据需要getServerSideProps()，因为数据会经常变化。

接下来，您不能在同一页面上将它们相互结合使用，所以我的想法是我可以将它们与客户端呈现的组件一起使用，例如 <ClientOnly><Countries></ClientOnly>，但我一直在阅读完成的代码客户端呈现不会'不会被 SEO 阅读。

我想我只是担心通过getServerSiderProps() 做所有事情，因为我认为可能会有很多请求，所以我会尝试设计代码以使用静态和动态，但我仍然希望 SEO 工作适当地。这个问题在 NEXT JS github 中有部分概述 https://github.com/vercel/next.js/discussions/11424

任何想法都将不胜感激。

我应该只通过getServerSideProps() 获取我的所有查询吗？

【问题讨论】：

标签： javascript reactjs next.js apollo

【解决方案1】：

如果您的网站可以在构建新版本时显示缓存内容，您应该使用带有 revalidate 属性的 getStaticProps()。这将触发称为 ISR（增量静态再生）的功能。

如果 SEO 对您的网站很重要，请尽量避免使用 getServerSideProps()。

【讨论】：