服务器组件

React 服务器组件允许你编写可以在服务器上渲染并可选地缓存的 UI。在 Next.js 中，渲染工作通过路由段进一步拆分，以实现流式处理和部分渲染，并且有三种不同的服务器渲染策略

• 静态渲染
• 动态渲染
• 流式处理

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

服务器渲染的优势

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

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

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

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

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

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

每个块都分两个步骤渲染：

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

然后在客户端：

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

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

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

• 服务器组件的渲染结果
• 客户端组件应渲染位置的占位符及其 JavaScript 文件的引用
• 从服务器组件传递到客户端组件的任何 props

服务器渲染策略

服务器渲染有三个子集：静态、动态和流式处理。

静态渲染（默认）

通过静态渲染，路由在构建时渲染，或在 数据重新验证 后在后台渲染。结果被缓存，并且可以推送到 内容分发网络 (CDN)。这种优化允许你在用户和服务器请求之间共享渲染工作的结果。

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

动态渲染

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

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

具有缓存数据的动态路由

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

在 Next.js 中，你可以拥有同时具有缓存和未缓存数据的动态渲染路由。这是因为 RSC 负载和数据是分别缓存的。这允许你选择动态渲染，而无需担心在请求时获取所有数据对性能的影响。

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

切换到动态渲染

在渲染期间，如果发现 动态 API 或 { cache: 'no-store' } 的 fetch 选项，Next.js 将切换为动态渲染整个路由。下表总结了动态 API 和数据缓存如何影响路由是静态渲染还是动态渲染：

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

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

动态 API

动态 API 依赖于只能在请求时（而不是在预渲染期间提前）知道的信息。使用这些 API 中的任何一个都会发出开发人员的意图信号，并将整个路由选择为在请求时动态渲染。这些 API 包括：

• cookies
• headers
• connection
• draftMode
• searchParams prop
• unstable_noStore

流式处理

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

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

你可以使用 loading.js 和带有 React Suspense 的 UI 组件开始流式传输路由段。有关更多信息，请参阅加载 UI 和流式处理部分。