Angular 应用启用服务器端渲染后 Ngrx store 和 re-hydration 的交互关系

在 Angular 启用服务器端渲染（Server-Side Rendering，SSR）后，当浏览器端访问这个 Angular 应用时，会涉及到一系列过程，包括初始化、数据获取、hydration（重新注水）和与 NgRx Store 之间的交互。下面我将详细介绍这些步骤：

1. 初始化应用：

   • 用户在浏览器中输入应用的URL。
   • 服务器端处理请求，生成一个包含Angular应用的HTML页面。
   • 服务器端将预渲染的Angular组件及其初始状态嵌入HTML页面。

2. 初始渲染（Server-Side Rendering）：

   • 浏览器接收到HTML页面，开始解析和渲染。
   • Angular应用的初始状态和模板通过HTML的内联脚本加载到浏览器中。
   • 浏览器开始呈现应用，这意味着用户能够看到页面内容，但此时还没有进行完全的客户端渲染。

3. 数据获取：

   • 一旦初始渲染完成，Angular应用可能需要从服务器或其他数据源获取更多数据。这可以通过HTTP请求或WebSocket等方式进行。
   • 这些数据用于更新应用的状态，以便呈现完整的页面内容。

4. Hydration（重新注水）：

   • 在客户端初始渲染之后，Angular应用需要"重新注水"，也就是将客户端的DOM与服务器端渲染的HTML进行关联。
   • Angular会识别已经渲染的DOM，并与其匹配已经渲染的组件和状态。
   • 这个过程确保客户端渲染不会从头开始构建DOM，而是尽可能复用服务器端渲染的DOM。
   • 这减少了加载时间和提高了性能。

5. NgRx Store 的交互：

   • NgRx是一个状态管理库，通常用于管理Angular应用的状态。
   • 在SSR中，客户端和服务器端之间需要协调数据的状态。服务器端渲染会初始化应用状态，并在注水时传递给客户端。
   • 在客户端，NgRx Store会恢复这些状态并确保客户端的状态与服务器端保持同步。
   • 当客户端应用需要更多数据时，可以发起Action，这将触发HTTP请求或其他数据获取操作，然后将数据更新到Store中。
   • 组件可以选择订阅Store中的状态，以获取数据并反映在界面上，同时也可以分发Actions来改变状态。

总之，通过服务器端渲染和hydration，Angular应用在浏览器中的初始化速度更快，用户可以更快地看到内容。NgRx Store则用于管理状态，确保服务器端和客户端之间的状态同步。这种方式有助于提高性能和搜索引擎优化，同时提供更好的用户体验。