什么是 Angular 应用的 re-hydration 过程

在讨论 Angular 的服务器端渲染（Server-Side Rendering，简称 SSR）以及重水合（Re-hydration）的过程之前，我们首先需要理解一些基本概念。

Angular 是一个流行的前端 JavaScript 框架，能够用于开发单页应用（SPA）。SPA 在浏览器中加载一次，之后所有的用户交互都通过 JavaScript 来处理，这样能提供流畅的用户体验。然而，这种方法的一个问题是，因为整个应用都需要在客户端加载和执行，所以首屏加载可能会比较慢。而且，由于内容是通过 JavaScript 动态生成的，搜索引擎可能无法正确地索引这些内容。

为了解决这些问题，Angular 提供了一个叫做 Angular Universal 的解决方案。Angular Universal 通过在服务器端运行 Angular 应用，生成静态的 HTML 页面，然后将这个静态的 HTML 发送到客户端。这样，用户可以立即看到页面的内容，同时搜索引擎也能正确地索引这些内容。

那么，当我们启用 Angular 的 SSR 之后，用户在浏览器端访问 Angular 应用时，背后到底发生了什么呢？

首先，当用户请求一个页面时，请求会被发送到服务器。服务器上运行的 Angular 应用会处理这个请求，执行相关的路由，获取必要的数据，并生成一个完整的 HTML 页面。这个页面包含了所有的静态内容，以及一些额外的信息，比如状态数据和其他配置信息。然后，服务器将这个 HTML 页面以及其他相关的文件（比如 CSS、JavaScript 文件等）发送到客户端。

然后，客户端收到这个 HTML 页面和其他文件后，浏览器会立即开始渲染页面。因为页面已经是完整的 HTML，用户可以立即看到页面的内容，而不需要等待 JavaScript 加载和执行。这就是所谓的 " 首屏优化 "。

然后，浏览器开始加载和执行 JavaScript。在这个过程中，Angular 会启动并开始 " 重水合 " 的过程。重水合是一个特殊的步骤，用于将服务器生成的静态 HTML " 转变 " 为一个完全交互的 SPA。重水合的过程包括以下几个步骤：

1. Angular 会解析 HTML，创建一个新的 Angular 应用实例。这个新的应用实例会与 HTML 页面中的元素进行关联，创建一个完整的组件树。

2. 然后，Angular 会加载和初始化服务（Services）、路由（Routes）、模块（Modules）等。这个过程中，Angular 会利用 HTML 中的状态数据和其他配置信息，来正确地初始化应用的状态。

3. 之后，Angular 会开始 " 激活 " 组件。激活的过程中，Angular 会执行组件的生命周期钩子函数，比如 ngOnInit、ngAfterViewInit 等。