<div id="navCategory"></div> 

最近，React 服务器组件受到了广泛的关注和热捧。这是因为 React 服务器组件允许开发人员将与组件相关的任务外包给服务器。这样，开发人员就无需分发捆绑的 JavaScript 和外部 API 查询，以便将组件水化，同时也避免了会导致客户端应用程序延迟增加的情况。 在本文中，我们将讨论什么是 React 服务器组件，以及如何将它们集成到构建应用程序中。

我们将创建一个场景来介绍服务器组件的概念。可以将产品页面结构化如下：

现在我们有很多方法去获取组件中需要的数据，如下所示，一次性获取获取到组件所需的数据：

使用这种方法效果很好，而且有其优点，例如：

• 这种方法适合用户体验，因为所有组件都是在获取数据后在客户端渲染的。

不过，它也可能带来一些问题，例如：

• 由于它将数据内容与父组件的子组件绑定在一起，因此会产生高度耦合。这会使这些组件难以维护。
• 这也违背了单一责任的理念，因为子组件并不单独对其数据负责，因此依赖于父组件的数据。
• 加载时间长，因为它需要一次性获取所有组件的所有数据。

为了实现单一责任，我们可以重组父组件，以如下方式显示组件：

使用这种方法效果很好，而且有其优点，例如：

• 单一责任： 每个组件对自己的数据负责。

但是，它可能会产生一些问题，例如：

• 它可能不适合用户体验，因为任何一个子组件都可能根据其 API 调用的加载时间，先于另一个组件在客户端渲染，从而使用户先于另一个组件看到页面的一部分。
• 此外，由于 组件将先于子组件（）呈现，因此数据的顺序获取会造成网络瀑布流的情况。

这些方法各有利弊，但有一个共同的局限性。这个限制是，这两种方法都需要从客户端向服务器调用 API，这会造成客户端和服务器之间的高延迟。

正是这一限制促使 React 团队引入了服务器组件：服务器上的组件。由于服务器组件存在于服务器上，因此与在应用程序客户端渲染的组件相比，它们可以更快地进行 API 调用并快速渲染。

讯享网

虽然最初是为了解决高延迟的限制，但新的应用也随之出现。由于组件驻留在服务器上，它们可以访问服务器基础设施，这意味着它们可以连接到数据库并对其进行查询。

服务器组件和客户端组件的一个主要区别是，服务器组件在服务器上呈现组件，而客户端组件在客户端上呈现。

通常，对于客户端的 React 应用程序来说，当用户从服务器请求网页时，服务器会将网页（Javascript 文件）响应给浏览器。浏览器下载数据（Javascript 文件）并用于构建网页。 另一方面，客户端组件会发送到客户端，从而增加了应用程序的捆绑大小（客户端组件是典型的传统 React 组件）。

另一个区别在于它们的呈现环境，这赋予了它们不同的属性，具体解释如下：

• 服务器组件不能使用 React 钩子，如 useState、useReducer、useEffect 等。这是因为服务器组件是在服务器上呈现的，因此无法访问可影响 DOM（文档对象模型）的钩子，而 DOM 仅存在于客户端。另一方面，客户端组件是普通的 React 组件，仍然可以访问钩子。
• 服务器组件无法访问浏览器 API，如 SessionStorage、localStorage 等。另一方面，客户端组件是普通的 React 组件，仍然可以访问浏览器 API。
• 服务器组件可以对数据库、内部服务、文件系统等服务器专用数据源使用 async/await，而客户端组件则不能直接访问服务器专用数据源。

React 中的服务器端呈现（SSR）是指应用程序将服务器上的 React 组件转化为完全呈现给客户端的静态 HTML 页面的能力。 另一方面，React 服务器组件（React Server Components）通过一个中介结构（类似于 JSON 格式的协议）与 SSR 协作，从而在不向客户端交付任何捆绑包的情况下实现渲染。

我们将说明如何在传统的 React 应用程序和 Next.js 应用程序中使用服务器组件。

在 React 应用程序中使用服务器组件。 在典型的 React 应用程序中，服务器组件就像普通的 React 组件一样。

请注意，要在带有 .tsx 文件的 typescript 组件中使用 async/await，需要将 typescript 版本升级到 5.1.1。要了解更多信息，请访问此处

下面是一个服务器组件的示例:

客户端组件看起来就像普通的 React 组件，但在组件文件中添加了  指令。从技术上讲， 指令声明了服务器组件和客户端组件之间的边界。

在使用服务器和客户端组件时，有一些特定的规则需要了解：

服务器组件不能导入到客户端组件中，但客户端组件可以导入到服务器组件中。我们将用下面的例子来说明如何将客户端组件导入到服务器组件中：

在上面的代码中，我们将 （客户端组件）导入了服务器组件。

当客户端组件位于服务器组件内时，服务器组件可以作为子 prop 传递给客户端组件。

默认情况下，服务器组件是在 Next 13 中新引入的 App 目录中创建的普通 React 组件。

中的客户端组件看起来像普通的 React 组件，但在组件文件中添加了  指令。

我们将介绍在开发中使用服务器组件的优点以及缺点。

优点:

• 减少捆绑： 服务器组件是 "零捆绑 "组件，因为它们不会增加客户端渲染的 Javascript 捆绑大小。
• 访问服务器基础设施： 使用服务器组件，可以无缝连接数据库、文件系统等服务器基础设施。
• 由于可以将 API 调用委托给在服务器上运行的服务器组件，因此减少了客户端的延迟。

缺点:

• 服务器组件无法访问客户端功能。
• 由于服务器组件可提供与普通 SSR（服务器端渲染）应用程序几乎相同的优势，而且许多人已习惯使用 SSR，因此其采用可能不会很快。
• 由于服务器组件可以访问服务器基础架构，它可能会导致应用程序设计不佳，因为它可能会鼓励开发人员回避创建 API 或甚至独立的后端，而是直接通过服务器组件执行查询和连接数据库。

在本文中，我们介绍了 React 中的服务器组件，并讨论了它们的用途和优点。React 服务器组件使我们能够以一种全新的方式在 React 应用程序中将客户端和服务器端渲染组件的优点结合起来。

以上就是React 服务器组件的使用方法详解的详细内容，更多关于React服务器组件的资料请关注脚本之家其它相关文章！