Next.js App Router 的 SEO 性能：服务器组件还是客户端组件？

Question

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

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

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

Answer 1

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

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

现在，对于 SEO，对于不涉及数据获取的静态组件来说没有什么区别。例如，无论添加"use client"与否，以下组件在 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>
  );
}