reactjs - Next.js App Router 的 SEO 性能 : Server Component or Client Components?

Question

我曾经认为，当你使用“use client”指令声明页面或组件时，你将无法在浏览器的“查看页面源代码”中看到这些页面，因为它们仅在客户端使用 JS 渲染(就像纯 React 中发生的情况一样)。

但是，我刚刚测试了这个案例，发现几乎所有“使用客户端”下编写的内容仍然显示在页面源代码中。那么服务器组件和带有“使用客户端”指令的 SEO 组件之间有什么区别？

使用服务器组件也有助于 SEO 吗？或者它的主要应用是为了提高性能？

Answer 1

事实上，在 app 目录中的 Next.js 中，服务器和客户端组件都首先在服务器上呈现，并以 HTML 形式发送到浏览器(您可以在里面看到每个页面生成的 HTML 文件)构建项目后的 .next/sever/app)。

两者之间的区别在于，当您添加“使用客户端”时，这意味着该组件包含客户端交互性，因此 Next.js 应该发送所需的附加 JavaScript(例如事件处理程序、效果等)并将其附加到HTML，同时将其转换为 React 元素。

现在，关于 SEO，对于不涉及数据获取的静态组件来说没有什么区别。例如，无论您是否添加“使用客户端”，以下组件在 SEO 方面都会具有相似的性能:

export default function Component() {
  return <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>;
}

但是假设您必须通过互联网获取一些数据。好吧，下面的服务器组件连同其获取的数据作为初始 HTML 的一部分发送到浏览器，而下面的客户端组件则作为空 div 发送:

export default async function Component() {
  const res = await fetch("API_URL");
  const data = await res.json();
  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.content}</div>
      ))}
    </div>
  );
}

"use client";

import { useEffect, useState } from "react";

export default function Component() {
  const [data, setData] = useState([]);
  useEffect(() => {
    async function fetcher() {
      const res = await fetch("API_URL");
      const data = await res.json();
      setData(data);
    }
  }, []);
  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.content}</div>
      ))}
    </div>
  );
}