[译] 解读 React服务器组件

作者：Mehul Mohan; 本文翻译自：www.freecodecamp.org/news/react-…

上周，React团队发布了一个名为React Server Components（RSC）的新功能。在这篇文章中，我想向您介绍我对RSC几个方面的看法。

我不能在服务器上运行React吗？

React支持服务器端渲染已经有很长一段时间了，它使用了React-dom/server包，这是一个用于React组件的静态超文本标记语言的响应渲染器。

但是，请注意，反应dom/server有一个简单的工作：它接受反应树，并将其转换为静态超文本标记语言标记。

您必须对状态进行再水化（使用React DOM。水化），使用客户端JavaScript添加任何交互性，并亲自处理导航、缓存和一百万件其他事情。

像Next.js这样的框架已经为你做了很多繁重的工作，但那是另一天的事了。

那么，React服务器组件与服务器端渲染有何不同呢？

服务器组件不是完整_的_SSR。将React网站视为组件的层次结构，如下所示：

让我们使用Next.js作为SSR的示例，因为它是React最常见的SSR框架。Next.js（SSR）使您能够执行以下操作：

1. 完全静态导出站点，没有JS
2. 每页部分静态导出（实验Next.js功能）
3. 完成树的SSR（然后重新水化，依此类推）
4. 使用客户端上呈现的动态导入作为React模块拆分组件。
5. 使用服务器上呈现的动态导入作为React模块拆分组件。

您能猜出这里缺少什么（或者更确切地说没有缺少）吗？在Next的静态导出中，除非为组件创建一个页面，否则您不能静态导出组件。

即使您这样做了，您也失去了从某些用户操作触发动态数据更新的能力（除非您在客户端使用另一个后端应用编程接口服务器，使用户界面非SSR）。

现在可能很难看到，但是反应服务器组件填补了这个空白。再次考虑上面的图表和上面的5点：

1. 完全静态导出意味着上面图表中的所有节点都是没有JS的完整超文本标示语言文档。现在将1个节点视为一个页面，假设有多个这样的根，所有页面都是完全基于超文本标示语言的。
2. 部分静态导出意味着只有单个根（单页）是静态的
3. 完整的SSR意味着整个网站（或页面）每次都按需渲染。这包括从上到下渲染页面，然后用React重新水化页面（如果你愿意，在_昂贵的_地方添加少量缓存）
4. 使用在客户端呈现的动态导入作为反应模块拆分组件——这意味着一些节点（比如4和7）将不会在服务器上呈现，它们组件的原始JS代码将被发送到网络上，并将像常规的客户端JS反应组件一样运行。因为4和7不在服务器上呈现，这也自动适用于它们的子节点（8,9,14）。
5. 使用服务器上呈现的动态导入作为反应模块拆分组件——这是最接近RSC的方法。在这里，我们将组件代码拆分成不同的捆绑包（块），在服务器上呈现，只有当客户端请求时才发送（例如——在搜索字段中键入或点击按钮）。

所以现在的问题是，RSC与服务器上呈现Next.js动态导入有什么不同？

RSC vs服务器上呈现的动态导入

到目前为止，服务器上呈现的动态导入总是被下载并作为常规的React组件使用。

客户端的React服务器组件根本不是组件。它们是_别的东西。_

首先，您的React Server组件只能更新一小部分UI（组件）。它们与典型的SSR不同，因为它们不会在第一次加载时发送静态超文本标记语言。

如果您使用React而不使用SSR，但使用RSC，那么您的第一个负载看起来将与常规客户端React差不多（没有超文本标记语内容）。

让我们考虑一个应用程序，它使用搜索栏搜索电影，链接到后端的数据库。假设搜索结果实际上是一个反应服务器组件，而不是一个常规组件。对于常规组件，这是可能发生的情况：

1. 一旦键入，就会向某个JSON有效负载的远程API发出获取请求。
2. 一旦获得数据，就将其解析为JSON，并将其交给React。
3. React渲染来自JSON数据的结果组件，并显示电影信息。

很简单。使用RSC，将发生以下情况：

1. 网络请求将向您拥有的能够呈现RSC的后端发出。
2. 组件呈现在服务器上（上面的步骤2和3），并且您现在以_非JSON/non-HTML格式_发送数据的静态标记构建（这在将来可能会改变）
3. 前端将此标记呈现为_静态用户界面（重要_的是：不是React组件）。这节省了前端组件的额外处理。

在服务器上呈现动态导入，这没有多大意义，因为您的客户端不能告诉您的“动态导入”块呈现依赖于状态的用户界面。这是因为动态导入只是出于性能原因。 当你使用RSC时，还有很多事情要注意：

1. 您无法使您的服务器组件具有交互性（因为它们只是UI更新的块）
2. 但是，您可以在服务器端组件中包含客户端组件，这些组件可以是交互式的，并且可以像您期望的那样呈现。
3. 您来自服务器的用户界面自动与客户端状态同步，因为您在自行更新用户界面部分时从不“销毁和创建”组件——React为您做到这一点。

结论

仅此而已！我希望这篇文章能帮助你更清楚地理解RSC。这项技术是新的，也可以与Next.js这样的框架集成。让我们看看未来会发生什么。

想了解更多吗？ React团队有一段57分钟的官方视频，深入RSC，包括演示。你可以在这里查看。

如果你喜欢这篇文章，你可以在推特上关注我，了解更多这样的东西：）