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