Menu

服务器组件

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 Payload) 的特殊数据格式。
  2. Next.js 使用 RSC Payload 和客户端组件 JavaScript 指令在服务器上渲染 HTML

然后,在客户端:

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

什么是 React 服务器组件有效负载 (RSC)?

RSC Payload 是渲染后的 React 服务器组件树的紧凑二进制表示。React 在客户端使用它来更新浏览器的 DOM。RSC Payload 包含:

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

服务器渲染策略

服务器渲染有三种子类型:静态、动态和流式传输。

静态渲染(默认)

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

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

动态渲染

使用动态渲染时,路由会在请求时为每个用户渲染。

当路由具有针对用户个性化的数据或只能在请求时获知的信息时,动态渲染很有用,比如 cookies 或 URL 的搜索参数。

具有缓存数据的动态路由

在大多数网站中,路由并非完全静态或完全动态 - 这是一个范围。例如,你可以有一个电子商务页面,使用按间隔重新验证的缓存产品数据,但同时也有未缓存的个性化客户数据。

在 Next.js 中,你可以拥有同时具有缓存数据和未缓存数据的动态渲染路由。这是因为 RSC Payload 和数据是分开缓存的。这使你可以选择使用动态渲染,而不必担心在请求时获取所有数据对性能的影响。

详细了解完整路由缓存数据缓存

切换到动态渲染

在渲染过程中,如果发现动态 API或未缓存的数据请求,Next.js 将切换到动态渲染整个路由。这个表格总结了动态 API 和数据缓存如何影响路由是静态还是动态渲染:

动态 APIs数据路由
已缓存静态渲染
已缓存动态渲染
未缓存动态渲染
未缓存动态渲染

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

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

动态 APIs

动态 APIs 依赖于只能在请求时(而不是在预渲染期间提前)获知的信息。使用这些 API 中的任何一个都表明开发者的意图,并将使整个路由在请求时选择动态渲染。这些 API 包括:

流式传输

图表显示了流式传输期间路由段的并行化,展示了单个块的数据获取、渲染和水合过程。

流式传输使你能够从服务器progressively渲染 UI。工作被分成多个块,并在准备就绪时流式传输到客户端。这使用户可以在整个内容完成渲染之前立即看到页面的部分内容。

图表显示了客户端上部分渲染的页面,正在流式传输的块显示加载 UI。

流式传输默认内置于 Next.js 应用路由器中。这有助于改善初始页面加载性能,以及依赖较慢数据获取而会阻塞整个路由渲染的 UI(例如,产品页面上的评论)。

你可以使用 loading.js 和带有 React Suspense 的 UI 组件开始流式传输路由段。更多信息请参见加载 UI 和流式传输章节。

下一步

了解 Next.js 如何缓存数据和静态渲染的结果。