在 React Server 组件范式中，客户端组件是如何处理渲染的？

Question

我理解服务器组件在服务器上进行完整的渲染，并且它们不包含在传输到客户端的 JS 包中。此外，服务器组件不会在客户端发生水合作用。

但是，我的不确定性在于客户端组件。

1. 客户端组件是否完全合并到客户端 JS 包中并且仅在客户端处理？——与传统的 React 行为类似？
2. 或者，客户端组件是否在服务器上部分渲染，然后与它们的 JS 包一起分派到客户端，进行水合作用？这种行为有点让人想起 Next 中的页面路由器。

我承认客户端组件的处理可能因一个框架而异，与 Gatsby 等框架相比，Next.js 可能会以独特的方式处理它们。 我希望得到澄清，特别是在下一个应用程序路由器的上下文中。

我正在阅读 Josh W. Comeau 的这篇博客，其中 提到客户端组件在客户端和服务器端都呈现：

但是

我似乎没有找到任何其他教程或博客（据我搜索）似乎承认上述内容。 下划线始终表示客户端组件是在客户端处理的。

这导致客户端组件的处理方式混乱？ 100% 客户端还是客户端和服务器端？如果它是合法的部分客户端和服务器，那么它在 Next App 路由器的上下文中到底是如何发生的？

Answer 1

对于 nextjs，您的

client

 组件也会在服务器上静态呈现，以实现快速的初始加载时间。然后

水合以增加这些组件的交互性

根据文档：

在服务器上：

React 将服务器组件呈现为一种称为 React 服务器组件有效负载（RSC Payload）的特殊数据格式，其中包括对客户端组件的引用。
Next.js 使用 RSC 有效负载和客户端组件 JavaScript 指令在服务器上呈现路由的 HTML。

然后，在客户端：

HTML 用于立即显示路线的快速非交互式初始预览。
React 服务器组件有效负载用于协调客户端和服务器组件树，并更新 DOM。
JavaScript 指令用于补充客户端组件并使其 UI 具有交互性。

阅读更多关于渲染的

nextjs文档，尤其是this部分