Angular 服务器端渲染的静态 HTML 变为客户端的动态应用的过程

首先，让我们先了解一下 Angular 服务器端渲染 (SSR) 的工作原理。

当你的 Angular 应用启用服务器端渲染后，用户在浏览器中请求页面时，服务器会预先渲染出 HTML，并且将其发送到客户端。这样做的优点是可以改善首屏加载时间，提升 SEO 效果，因为搜索引擎可以抓取到预渲染的 HTML 内容。

那么，从浏览器端请求 Angular SSR 应用到页面完全交互可用，背后发生了什么呢？

1. 用户在浏览器中请求一个页面，服务器会接收到这个请求。

2. 服务器会运行 Angular 应用，生成应用的首屏 HTML 内容。在这个过程中，Angular 应用可能会进行 API 调用，获取一些初始化数据。

3. 如果你的应用使用了 NgRx，那么在服务器端渲染阶段，你的应用状态会被初始化，并且可能会在处理用户请求时改变。服务器会将这个最终的状态序列化，一起发送到客户端。

4. 服务器将生成的 HTML，以及序列化后的状态，发送到客户端。

5. 客户端接收到服务器返回的 HTML 和状态。HTML 会立即显示在浏览器中，用户可以看到页面的内容。但是此时的页面还不是完全交互可用的，因为 Angular 还没有启动。

6. 客户端会加载和启动 Angular。这个过程称为 “hydration” 或 “rehydration”。在这个过程中，Angular 会使用服务器发送过来的状态来初始化 NgRx Store。这样，客户端的状态就和服务器端的状态保持一致了。

7. 当 Angular 启动完成后，页面就变成了完全交互可用的。此时，任何用户的操作都会通过 NgRx Store 来改变应用的状态。

总的来说，rehydration 是一个过程，它将服务器端渲染的静态 HTML 变为客户端的动态应用。在这个过程中，NgRx Store 会使用服务器发送过来的状态来初始化，以确保客户端和服务器端的状态一致。