服务器组件

React 服务器组件允许您编写可以在服务器上渲染和选择性缓存的 UI。在 Next.js 中，渲染工作被路由段进一步分割，以实现流式渲染和部分渲染，并且存在三种不同的服务器渲染策略：

•  静态渲染
•   动态渲染
•  流媒体

本页将介绍服务器组件的工作原理、何时可能使用它们以及不同的服务器渲染策略。

服务器渲染的好处

在服务器上进行渲染工作有几个好处，包括：

• 
  数据获取：服务器组件允许您将数据获取移至更靠近数据源的服务器。这可以通过减少获取渲染所需数据所需的时间以及客户端需要发出的请求数量来提高性能。
• 
  安全性：服务器组件允许您将敏感数据和逻辑（例如令牌和 API 密钥）保留在服务器上，而不存在将它们暴露给客户端的风险。
• 
  缓存：通过在服务器上渲染，可以缓存结果并在后续请求和跨用户中重用。这可以通过减少每个请求上完成的渲染和数据获取量来提高性能并降低成本。
• 
  性能：服务器组件为您提供了额外的工具来优化基线性能。例如，如果您从完全由客户端组件组成的应用程序开始，将 UI 的非交互式部分移动到服务器组件可以减少所需的客户端 JavaScript 数量。这对于互联网速度较慢或设备功能较弱的用户来说是有益的，因为浏览器需要下载、解析和执行的客户端 JavaScript 较少。
• 
  初始页面加载和首次内容绘制（FCP）：在服务器上，我们可以生成 HTML 以允许用户立即查看页面，而无需等待客户端下载、解析和执行渲染页面所需的 JavaScript。
• 
  搜索引擎优化和社交网络可共享性：搜索引擎机器人可以使用渲染的 HTML 来索引您的页面，社交网络机器人可以使用渲染的 HTML 为您的页面生成社交卡预览。
• 
  流式传输：服务器组件允许您将渲染工作分成多个块，并在准备就绪时将它们流式传输到客户端。这允许用户更早地看到页面的某些部分，而不必等待整个页面在服务器上呈现。

在 Next.js 中使用服务器组件

默认情况下，Next.js 使用服务器组件。这允许您自动实现服务器渲染，无需额外配置，并且您可以在需要时选择使用客户端组件，请参阅客户端组件。

服务器组件是如何渲染的？

在服务器上，Next.js 使用 React 的 API 来编排渲染。渲染工作被分成多个块：按单独的路线段和悬念边界。

每个块都分两步渲染：

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

然后，在客户端：

1. 
   HTML 用于立即显示路线的快速非交互式预览 - 这仅适用于初始页面加载。
2. 
   React 服务器组件有效负载用于协调客户端和服务器组件树，并更新 DOM。
3. 
   JavaScript 指令用于补充客户端组件并使应用程序具有交互性。

什么是 React 服务器组件负载 (RSC)？

RSC Payload 是渲染的 React Server 组件树的紧凑二进制表示。客户端上的 React 使用它来更新浏览器的 DOM。 RSC 有效负载包含：

• 
  Server Components的渲染结果
• 
  客户端组件应呈现的位置的占位符以及对其 JavaScript 文件的引用
• 
  从服务器组件传递到客户端组件的任何道具

服务器渲染策略

服务器渲染分为三个子集：静态、动态和流式传输。

静态渲染（默认）

使用静态渲染，路线在构建时渲染，或者在数据重新验证后在后台渲染。结果被缓存并可以推送到内容交付网络 (CDN)。此优化允许您在用户和服务器请求之间共享渲染工作的结果。

当路由具有未针对用户个性化且可在构建时已知的数据（例如静态博客文章或产品页面）时，静态渲染非常有用。

 动态渲染

通过动态渲染，可以在请求时为每个用户渲染路线。

当路由具有针对用户的个性化数据或具有仅在请求时才能知道的信息（例如 cookie 或 URL 的搜索参数）时，动态呈现非常有用。

具有缓存数据的动态路由

在大多数网站中，路由并不是完全静态或完全动态的 - 它是一个频谱。例如，您可以拥有一个电子商务页面，该页面使用定期重新验证的缓存产品数据，但也包含未缓存的个性化客户数据。

在 Next.js 中，您可以动态渲染包含缓存和未缓存数据的路由。这是因为 RSC 有效负载和数据是分开缓存的。这使您可以选择动态渲染，而不必担心在请求时获取所有数据对性能的影响。

了解有关全路由缓存和数据缓存的更多信息。

切换到动态渲染

在渲染过程中，如果发现动态函数或未缓存的数据请求，Next.js 将切换为动态渲染整个路由。下表总结了动态函数和数据缓存如何影响静态或动态渲染路由：

在上表中，要使路由完全静态，必须缓存所有数据。但是，您可以拥有使用缓存和未缓存数据获取的动态渲染路由。

作为开发人员，您无需在静态渲染和动态渲染之间进行选择，因为 Next.js 会根据所使用的功能和 API 自动为每个路线选择最佳渲染策略。相反，您可以选择何时缓存或重新验证特定数据，并且可以选择流式传输部分 UI。

 动态函数

动态函数依赖于只能在请求时获知的信息，例如用户的 cookie、当前请求标头或 URL 的搜索参数。在 Next.js 中，这些动态函数是：

• 
  cookies() 和 headers() ：在服务器组件中使用它们将在请求时选择整个路由进行动态渲染。
• 
  searchParams ：在页面上使用 searchParams 属性将选择页面在请求时进行动态渲染。

使用这些函数中的任何一个都会在请求时选择整个路线进行动态渲染。

 流媒体

流式传输使您能够从服务器逐步渲染 UI。工作被分成多个块，并在准备就绪时流式传输到客户端。这允许用户在整个内容完成呈现之前立即看到页面的部分内容。

默认情况下，流式传输内置于 Next.js App Router 中。这有助于提高初始页面加载性能，以及依赖于较慢数据获取（会阻止渲染整个路由）的 UI。例如，产品页面上的评论。

您可以使用 loading.js 和 UI 组件以及 React Suspense 开始流式传输路线段。有关更多信息，请参阅加载 UI 和流媒体部分。