Angular应用中的Hydration基本概念详解

数码系统

相机 win10

测评 win11

手机智车

华为 Tesla

小米理想

苹果蔚来

游戏软件

LOL 抖音

原神微信

当前位置：首页

前端开发

Angular应用中的Hydration基本概念详解

热心网友时间：2026-06-12

转载

Angular 应用程序的 Hydration 概念在 Angular 开发中，有一个术语经常被提及，那就是 Hydration（水合）。这并非玄学，而是直接关系应用渲染性能的关键技术细节。要理解它，需要先了解客户端渲染（CSR）和服务器端渲染（SSR）这对“兄弟”的差异。别急，我们先厘清基本概念

Angular 应用程序的 Hydration 概念

在 Angular 开发中，有一个术语经常被提及，那就是 Hydration（水合）。这并非玄学，而是直接关系应用渲染性能的关键技术细节。要理解它，需要先了解客户端渲染（CSR）和服务器端渲染（SSR）这对“兄弟”的差异。别急，我们先厘清基本概念，再深入探讨 Angular 如何借助 Hydration 让 CSR 应用运行得更高效。下面将通过实例逐步拆解，保证一看就懂。

Angular 应用程序的 Hydration 基本概念详解

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 包加载期间，就能看到页面上的内容，甚至能进行一些简单交互。这样一来，感知上的加载速度得到了显著提升。