理解 Next.js 中的水合作用

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

Next.js 以其构建服务器端渲染 (SSR) 和静态生成 (SSG) React 应用的强大功能而闻名。Next.js 的优化策略和流畅用户体验的核心概念是“水合”。

什么是水合作用？

水合（Hydration）是将预渲染的服务器端内容转换为客户端交互式用户界面的过程。当用户访问预渲染页面时，Next.js 会立即将完全渲染的 HTML 内容（包括来自服务器的初始数据和 UI）发送到客户端浏览器。然后，客户端 JavaScript 会“水合”这些静态内容，赋予其交互性，从而形成一个功能齐全的 React 应用。

与传统的客户端渲染 (CSR) React 应用（浏览器先检索一个空的 HTML 页面，然后再获取 JavaScript 包进行渲染和数据获取）相比，Next.js 的水合过程显著减轻了初始加载延迟。

补水是如何起作用的？

理解 Next.js 中的水合作用机制需要梳理其各个步骤：

1. 服务器端渲染 (SSR)： Next.js 会根据用户请求在服务器端渲染 React 组件，并整合当时可用的数据。这样就能生成一个包含服务器端状态和数据的完整渲染 HTML 页面。

2. 将 HTML 发送到客户端： Next.js 会将完全渲染的 HTML 页面作为主要响应发送到客户端浏览器。HTML 内容封装了页面的静态表示。

3. 客户端 JavaScript 执行：客户端浏览器接收到 HTML 后，便开始执行页面中嵌入的 JavaScript 代码包。这些代码包会利用与服务器端相同的虚拟 DOM，在客户端重建 React 组件。

4. 比较与协调：在重新渲染过程中，客户端的 React 会将服务器渲染的虚拟 DOM 与其客户端对应物进行比较，这个过程称为“协调”。然后，React 会将客户端虚拟 DOM 与其服务器渲染的对应物同步。

5. 事件处理和交互性：完成重新水合过程后，客户端的 React 组件将获得完全的交互性，从而实现与 CSR React 应用程序类似的无缝事件处理和状态转换。

水合作用的优势

Next.js 中的水合作用带来了几个重要的优势：

1. 加速交互时间 (TTI)：通过缩短交互时间 (TTI)，预渲染技术可显著提升页面交互速度和响应能力。用户在收到预渲染的 HTML 后即可立即与内容互动，从而避免 JavaScript 包加载带来的延迟。

2. 增强 SEO 和可访问性： Next.js 对 SSR 和 SSG 的支持通过直接访问完全渲染的 HTML 内容来增强 SEO 和可访问性，从而增强搜索引擎的抓取能力并改善残疾用户的可访问性。

3. 增强性能和用户体验：水合作用通过加快加载时间和实现无缝交互来提高性能，最终带来卓越的用户体验和更高的参与度。

4. 优雅降级：在 JavaScript 无法加载或执行的情况下，Next.js 会优雅地回退到服务器渲染的内容，从而确保用户能够不间断地访问和导航。

5. 客户端优化：尽管最初采用服务器端渲染，但 Next.js 集成了客户端 JavaScript 包，以便在水合后进行动态更新、代码拆分和其他客户端渲染优化。

欲了解更多信息，请访问原文。