作者: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)使您能够执行以下操作:
- 完全静态导出站点,没有JS
- 每页部分静态导出(实验Next.js功能)
- 完成树的SSR(然后重新水化,依此类推)
- 使用客户端上呈现的动态导入作为React模块拆分组件。
- 使用服务器上呈现的动态导入作为React模块拆分组件。
您能猜出这里缺少什么(或者更确切地说没有缺少)吗?在Next的静态导出中,除非为组件创建一个页面,否则您不能静态导出组件。
即使您这样做了,您也失去了从某些用户操作触发动态数据更新的能力(除非您在客户端使用另一个后端应用编程接口服务器,使用户界面非SSR)。
现在可能很难看到,但是反应服务器组件填补了这个空白。再次考虑上面的图表和上面的5点:
- 完全静态导出意味着上面图表中的所有节点都是没有JS的完整超文本标示语言文档。现在将1个节点视为一个页面,假设有多个这样的根,所有页面都是完全基于超文本标示语言的。
- 部分静态导出意味着只有单个根(单页)是静态的
- 完整的SSR意味着整个网站(或页面)每次都按需渲染。这包括从上到下渲染页面,然后用React重新水化页面(如果你愿意,在_昂贵的_地方添加少量缓存)
- 使用在客户端呈现的动态导入作为反应模块拆分组件——这意味着一些节点(比如4和7)将不会在服务器上呈现,它们组件的原始JS代码将被发送到网络上,并将像常规的客户端JS反应组件一样运行。因为4和7不在服务器上呈现,这也自动适用于它们的子节点(8,9,14)。
- 使用服务器上呈现的动态导入作为反应模块拆分组件——这是最接近RSC的方法。在这里,我们将组件代码拆分成不同的捆绑包(块),在服务器上呈现,只有当客户端请求时才发送(例如——在搜索字段中键入或点击按钮)。
所以现在的问题是,RSC与服务器上呈现Next.js动态导入有什么不同?
RSC vs服务器上呈现的动态导入
到目前为止,服务器上呈现的动态导入总是被下载并作为常规的React组件使用。
客户端的React服务器组件根本不是组件。它们是_别的东西。_
首先,您的React Server组件只能更新一小部分UI(组件)。它们与典型的SSR不同,因为它们不会在第一次加载时发送静态超文本标记语言。
如果您使用React而不使用SSR,但使用RSC,那么您的第一个负载看起来将与常规客户端React差不多(没有超文本标记语内容)。
让我们考虑一个应用程序,它使用搜索栏搜索电影,链接到后端的数据库。假设搜索结果实际上是一个反应服务器组件,而不是一个常规组件。对于常规组件,这是可能发生的情况:
- 一旦键入,就会向某个JSON有效负载的远程API发出获取请求。
- 一旦获得数据,就将其解析为JSON,并将其交给React。
- React渲染来自JSON数据的结果组件,并显示电影信息。
很简单。使用RSC,将发生以下情况:
- 网络请求将向您拥有的能够呈现RSC的后端发出。
- 组件呈现在服务器上(上面的步骤2和3),并且您现在以_非JSON/non-HTML格式_发送数据的静态标记构建(这在将来可能会改变)
- 前端将此标记呈现为_静态用户界面(重要_的是:不是React组件)。这节省了前端组件的额外处理。
在服务器上呈现动态导入,这没有多大意义,因为您的客户端不能告诉您的“动态导入”块呈现依赖于状态的用户界面。这是因为动态导入只是出于性能原因。 当你使用RSC时,还有很多事情要注意:
- 您无法使您的服务器组件具有交互性(因为它们只是UI更新的块)
- 但是,您可以在服务器端组件中包含客户端组件,这些组件可以是交互式的,并且可以像您期望的那样呈现。
- 您来自服务器的用户界面自动与客户端状态同步,因为您在自行更新用户界面部分时从不“销毁和创建”组件——React为您做到这一点。
结论
仅此而已!我希望这篇文章能帮助你更清楚地理解RSC。这项技术是新的,也可以与Next.js这样的框架集成。让我们看看未来会发生什么。
想了解更多吗? React团队有一段57分钟的官方视频,深入RSC,包括演示。你可以在这里查看。
如果你喜欢这篇文章,你可以在推特上关注我,了解更多这样的东西:)