Angular 应用程序的 Hydration 概念
在 Angular 开发中，有一个术语经常被提及，那就是 Hydration（水合）。这并非玄学，而是直接关系应用渲染性能的关键技术细节。要理解它，需要先了解客户端渲染（CSR）和服务器端渲染（SSR）这对“兄弟”的差异。别急，我们先厘清基本概念，再深入探讨 Angular 如何借助 Hydration 让 CSR 应用运行得更高效。下面将通过实例逐步拆解，保证一看就懂。
CSR 与 SSR 的基本区别
在讨论 Hydration 之前，有必要先回顾一下 CSR 和 SSR 的差异。
- CSR（客户端渲染）：整个应用的构建和渲染完全在浏览器中完成。用户访问页面时，浏览器先下载整个 JavaScript 包，然后在本地执行代码来渲染页面。优点是交互流畅，缺点是首次加载需要下载大量 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 骨架和一个庞大的 JavaScript 包。浏览器需要先下载这个包，再执行它，然后才能渲染出完整页面。用户看到的可能是一片空白或加载动画。这里就引出了一个性能痛点——如何让用户尽早看到内容？Hydration 就是解决这一问题的方案。
Hydration 概念的背后
Hydration 的核心思路其实很朴素：在 CSR 应用中，尽可能早地将内容展示给用户，不必等到整个 JS 包下载完毕。Angular 的做法是：在服务器端生成初始 HTML 时，就把一些内容嵌入进去，这些内容会在浏览器中立即显示。然后，JS 包在后台默默下载执行。待其就绪后，再对那些初始 HTML 进行“水合”（hydrate），转化为具有交互能力的真实组件。
换句话说，用户在等待 JS 包加载期间，就能看到页面上的内容，甚至能进行一些简单交互。这样一来，感知上的加载速度得到了显著提升。
Hydration 的工作原理
具体是如何实现的呢？我们来分步拆解：
- 服务器端生成初始 HTML：SSR 模式下，Angular 会生成一个包含特殊标记的 HTML。这些标记用于标识哪些区域后续需要水合。
- 初始 HTML 发送给浏览器：该 HTML 随响应一同被送到客户端。
- 浏览器开始下载 JS 包：与此同时，浏览器下载包含整个应用代码的 JavaScript 包。
- 执行 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 非常重要。
- 渐进增强：即使 JavaScript 加载失败或被禁用，页面依然能正常工作——因为初始内容已在服务器端生成。这是一种稳健的渐进增强策略。
Hydration 的挑战与注意事项
好事多磨，Hydration 虽然好，但也有一些坑需要留意：
- 额外复杂性：需要在初始 HTML 中添加特殊标记来指示哪些部分需要水合，代码结构会变得更复杂。
- 代码拆分：为了发挥 Hydration 的最佳效果，通常需要将代码拆成小块，让关键部分优先下载执行。
- 性能监控：必须持续监控 JS 包的下载和执行是否导致性能瓶颈，避免水合过程本身拖慢速度。
- 状态同步：必须确保初始 HTML 中的内容与后续 JS 执行后的状态保持一致，否则会出现不一致甚至错误。
结论
Hydration 是 Angular 中一个非常实用的机制，它让 CSR 应用既能保持交互性，又能像 SSR 一样快速展示内容。通过在初始 HTML 中植入标记，Angular 在 JS 包加载期间就把内容呈现给用户，随后在后台进行水合，完成交互能力的注入。
虽然实现它会引入额外的复杂度，但带来的收益——首屏加载性能提升、SEO 优化、渐进增强支持——是实实在在的。理解了 Hydration 的原理和适用场景，就能在开发中更有针对性地优化 Angular 应用的性能表现。
