Angular Hydration概念详解

Angular 应用程序的 Hydration 概念

在 Angular 开发中，Hydration（水合）是一个经常被提及的重要概念。它并非难以理解的技术，而是涉及应用渲染性能的关键环节。要掌握它，需先了解客户端渲染（CSR）与服务器端渲染（SSR）的区别。下面先梳理基础概念，再深入剖析 Angular 如何通过 Hydration 提升 CSR 应用的渲染速度。通过具体示例一步步拆解，帮助读者快速理解。

CSR 和 SSR 的基本区别

在讨论 Hydration 前，有必要回顾 CSR 与 SSR 的差异。

• CSR（客户端渲染）：整个应用的构建与渲染均在浏览器内完成。用户访问页面时，浏览器会下载整个 Ja vaScript 包，并在本地执行代码以渲染页面。优点是交互流畅，缺点是首次加载需下载大量 JS 文件，导致白屏时间较长。
• SSR（服务器端渲染）：收到用户请求后，服务器直接生成 HTML 并发送至浏览器。用户能更快看到页面内容，无需等待 JS 下载完毕。但对于复杂应用，服务器压力增加，某些交互功能实现会受限。

Angular 的 CSR 和 SSR

Angular 同时支持这两种模式。默认采用 CSR，即所有渲染工作交由浏览器处理。若对首屏加载速度有较高要求，或希望优化 SEO，SSR 则是更优选择。

在 CSR 模式下，启动代码通常如下：

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

而 SSR 模式下的代码如下：

platformServer().bootstrapModule(AppModule)
  .then(moduleRef => {
    const appRef = moduleRef.injector.get(ApplicationRef);
    const state = moduleRef.injector.get(PlatformState);
    appRef.isStable.pipe(
      first(isStable => isStable === true),
    ).subscribe(() => {
      state.renderToString().then(html => {
        console.log(html); // 在服务器上渲染的 HTML
        moduleRef.destroy();
      });
    });
  });

在 CSR 模式下，初次加载时，浏览器先获取一个基本 HTML 骨架与一个庞大的 Ja vaScript 包，随后下载并执行该包，才能渲染出完整页面。用户可能看到一片空白或加载动画。这里引出一个性能痛点：如何让用户尽早看到内容？Hydration 正是为解决此问题而设计。

Hydration 概念的背后

Hydration 的核心思路简单直接：在 CSR 应用中，尽可能提前将内容展示给用户，无需等待整个 JS 包下载完毕。Angular 的做法是：在服务器端生成初始 HTML 时，嵌入部分内容，这些内容会在浏览器中立即显示。与此同时，JS 包在后台默默下载与执行。当 JS 包准备就绪后，Angular 对初始 HTML 进行“水合”（hydrate），将其转化为具有交互能力的真实组件。

换句话说，用户在等待 JS 包加载期间，就能看到页面上的内容，甚至进行简单交互。这种设计显著提升了感知上的加载速度。

Hydration 的工作原理

具体实现过程可拆解为以下步骤：

• 服务器端生成初始 HTML：在 SSR 模式下，Angular 会生成包含特殊标记的 HTML。这些标记用于标识后续需要水合的区域。
• 初始 HTML 发送至浏览器：该 HTML 随响应一同送达客户端。
• 浏览器开始下载 JS 包：与此同时，浏览器下载包含完整应用代码的 Ja vaScript 包。
• 执行 JS 包：下载完成后，浏览器执行代码。Angular 框架会识别初始 HTML 中的特殊标记。
• 水合：Angular 将这些标记替换为真正的组件，并建立交互绑定。此时用户可正常操作页面，水合完成。

Hydration 示例

理论可能略显抽象，下面通过一个简单示例演示。假设有一个 Angular 组件 app-user-name，用于显示用户名。初始 HTML 可能如下：

  Loading...

这里放置占位符“Loading...”，因为 JS 包尚未下载，组件未激活。

加入 Hydration 流程后：

• 服务器端渲染生成初始 HTML，并发送至客户端。

  John Doe

可以看到，内容已变为“John Doe”，并增加了特殊属性 _nghost-abc123，用于标记组件。

• 浏览器下载 JS 包。
• 执行 JS 包时，Angular 发现初始 HTML 中的特殊标记。
• Angular 将标记替换为真实组件，并绑定交互逻辑。

  John Doe

该组件现已具备完整的 Angular 功能（如样式隔离、事件绑定），用户可直接与之交互，无需等待整个 JS 包执行完毕。

Hydration 的优势和应用场景

Hydration 最大的优势在于提升用户感知的加载速度，尤其适用于 CSR 应用。具体在以下场景中作用显著：

• 改善首屏加载性能：希望内容尽快呈现的应用，Hydration 能显著缩短白屏时间，体验提升明显。
• 提高 SEO：搜索引擎爬虫可读取初始 HTML 中的内容，无需等待 JS 执行完毕，对 SEO 至关重要。
• 渐进增强：即使 Ja vaScript 加载失败或被禁用，页面仍能正常显示初始内容（因为已在服务器端生成），这是一种稳健的渐进增强策略。

Hydration 的挑战和注意事项

Hydration 虽好，但存在一些注意事项：

• 额外复杂性：需在初始 HTML 中添加特殊标记以指示需要水合的部分，代码结构会变得更复杂。
• 代码拆分：为发挥 Hydration 最佳效果，通常需将代码拆分为小块，确保关键部分优先下载执行。
• 性能监控：需持续监控 JS 包的下载与执行是否导致性能瓶颈，避免水合过程本身拖慢页面速度。
• 状态同步：必须确保初始 HTML 中的内容与后续 JS 执行后的状态保持一致，否则可能出现不一致甚至错误。

结论

Hydration 是 Angular 中极为实用的机制，它使 CSR 应用既能保持交互性，又能像 SSR 一样快速展示内容。通过在初始 HTML 中植入标记，Angular 在 JS 包加载期间便将内容呈现给用户，随后在后台进行水合，注入交互能力。

尽管实现 Hydration 会引入额外复杂度，但其带来的收益——首屏加载性能提升、SEO 优化、渐进增强支持——是实质性的。理解 Hydration 的原理与适用场景，有助于在开发中更有针对性地优化 Angular 应用的性能表现。