Next 带有静态页面、s-s-r 页面和客户端渲染的 JS Seo

Posted 2023-03-10

【中文标题】Next 带有静态页面、s-s-r 页面和客户端渲染的 JS Seo

【英文标题】：Next JS Seo with static pages, s-s-r Pages and Client Side rendering

【发布时间】：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() 获取我的所有查询吗？

【参考方案1】：

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

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

阅读更多：https://vercel.com/docs/next.js/incremental-static-regeneration