你需要了解的React服务器组件

---

在创建传统的仅限客户端的React应用程序时，开发人员经常不得不在性能和SEO之间做出选择。服务器组件使开发人员能够更有效地利用服务器基础设施，从而默认获得出色的性能。

通过结合客户端交互和服务器端渲染的最佳方面，React服务器组件使程序员能够创建易于创建和维护的应用程序，并且可以跨不同项目共享。

在本文中，我们将了解React服务器组件是什么以及如何使用它们来创建同构应用程序。

什么是React服务器组件？

React服务器组件(RSCs)是一种新型组件，允许您创建可以在服务器上渲染的可重用组件。RSCs旨在简化同构(通用)应用程序的创建，同构应用程序是在服务器和客户端上都可以渲染的应用程序。

例如，项目依赖项现在可以仅保留在服务器上，而不是影响用户端JavaScript包的大小。

React服务器组件比传统的服务器端渲染有一些优势，具体来说：

• 这些服务器组件通常用于创建可在不同项目或应用程序之间共享的可重用组件。

• 使用RSCs，您可以编写在服务器和客户端之间共享的代码，这使得同构应用程序更易于开发。

• RSCs还允许您创建可以在客户端进行水化的有状态组件，这意味着您可以创建更快、更响应的同构应用程序。

React中的服务器组件与客户端组件

在React中，组件是可以重用的UI片段。组件有两种类型：服务器组件和客户端组件。服务器组件在服务器上渲染，而客户端组件在客户端上渲染。

每种类型的组件都有其优点和缺点。服务器组件通常更快、更可靠，但它们可能更难开发和部署。客户端组件更易于开发和部署，但它们可能更慢且不太可靠。

客户端组件不实现React服务器组件具有的以下功能：

• 利用仅服务器端的数据集，包括文件系统、数据库和内部服务。换句话说，该元素完全可以访问有关其所在节点的信息。

• 可以集成服务器钩子来访问服务器端资源，例如系统文件，并以类似于常规钩子的方式分发功能。

• RSCs是包含客户端和服务器组件的层次元素树的一部分，它们相互嵌套。

当我们谈到RSCs的一些限制时，让我们看看它们是什么：

• 不允许使用状态应用程序（例如，不支持useState()）。为什么？因为元素不是在浏览器上执行的，并且由于它只运行一次，并且结果会广播到浏览器，所以不会保留状态。

• 缺少useEffect生命周期操作 ()。同样，这是因为元素也没有在窗口中运行，在窗口中它可以受益于事件和副作用。

• 没有DOM或浏览器特定的API，前提是在客户端对它们进行polyfill。特别是考虑检索API，其中服务器端渲染算法通常提供polyfill，以使服务器端功能在API请求方面看起来与客户端相同。

最终，是否使用服务器组件或客户端组件取决于您的特定需求和偏好。如果您需要快速加载的网站，那么服务器组件是最佳选择。如果您需要一个使用更少资源的网站，那么客户端组件是最佳选择。

React服务器组件：用例

根据React团队的说法，服务器组件和SSR可以很好地协同工作。SSR是一种快速显示任何非交互式状态下客户端元素的方法。在检索第一个HTML后，您仍然需要承担下载、处理和运行这些客户端部分的成本。

与SSR相比，RSCs试图完全用服务器上进行的操作替换客户端功能，在SSR中，您试图发送元素的初步形式，该元素随后像常规客户端组件一样运行。

它有两个主要优点：

• 打包的JavaScript不需要发送到浏览器的网络。在这里，客户端加载JavaScript，运行它并接收输出。

• 进行初始API/Ajax查询以激活元素，然后元素可以立即与后端应用程序通信以满足这些需求。这样做可以减少客户端的通信量，并防止网站完成相关数据请求时偶尔发生的“查询瀑布”。

React服务器组件的工作原理

由于React服务器组件处于实验阶段，此功能的具体实现方式可能会发生变化。但是，我们可以了解其一些基本概念。

当您导航到src/文件夹内的代码时，用户将看到三种不同类型的组件文件名：

• 服务器组件由.server.js扩展名标识。

• React客户端组件由.client.js扩展名标识。

标准.js扩展名指定标准组件。这些组件可以在客户端或浏览器上执行，具体取决于谁在导出它们。当您使用npm start命令启动软件时，会同时运行两个作业：

• Node服务器使用的api.server.js/脚本服务器。

• 使用build.js/脚本代码为您的客户端React组件编译网页。

结论

这个全新的令人兴奋的功能有可能改变开发人员创建React应用程序的方式。它有助于将包导入React应用程序而不会增加客户端的包大小，从而产生稳定的应用程序版本。

但是，应该注意的是，React服务器组件绝不会取代其他React社区组件，特别是标准客户端组件。