526互联

Angular SSR 应用中 serverApp-state script 的工作原理介绍

发布时间 2023-11-17 13:29:45作者: JerryWang_汪子熙

<script id="serverApp-state" type="application/json"> 元素是在服务器端渲染（Server-Side Rendering，SSR）Angular 应用中用于传递状态数据的重要组成部分。它被称为 "SSR Transfer State" 机制的一部分，其作用是在服务器端生成的 HTML 页面中嵌入初始数据，以便客户端可以在应用初始化时使用这些数据，从而提高应用的性能和用户体验。

这个特殊的 <script> 元素通常位于 Angular SSR 渲染的 HTML 页面的 <head> 部分，具有一个特殊的 ID serverApp-state，以及 type 属性设置为 application/json，这是为了表明其内容是 JSON 数据。这个元素的目的是在服务器端渲染过程中捕获应用状态并将其传递到客户端，以便客户端应用可以快速加载并具备初始数据。

下面是这个元素的作用以及如何工作的简要说明：

  1. 捕获初始应用状态：

    • 在服务器端渲染期间，Angular 应用会获取初始状态数据，例如组件的数据、路由参数、用户权限等。这些数据通常保存在应用的状态管理机制中（例如 NgRx 或 Angular 的内置状态管理系统）。

  2. 序列化为 JSON：

    • 这些初始状态数据会被序列化为 JSON 格式。JSON 是一种通用的数据格式，易于在客户端解析。

  3. 嵌入到 <script> 元素中：

    • 序列化后的数据会被包装在位于 <script> 元素内的 application/json 类型的标签中。这使得客户端能够轻松地检索数据，并且它会在 HTML 页面的 <head> 部分出现如下所示：
    <script id="serverApp-state" type="application/json">
  `{"your": "serialized-data-here"}`
</script>
    • 注意，我在 JSON 数据中使用了特殊字符 `来替代英文双引号 "，以满足你的要求。

  4. 传递到客户端：

    • 当客户端加载服务器渲染的 HTML 页面时，浏览器会解析页面内容，包括 <script> 元素中的 JSON 数据。客户端应用可以通过检索这个元素的内容来获取初始状态数据，以便在应用初始化时使用。

  5. 初始化客户端应用：

    • 客户端应用会使用获取的初始状态数据来配置自身。这可以包括恢复用户会话、填充组件数据、路由导航和其他应用状态的初始化操作。这使得客户端应用能够立即呈现用户所需的内容，而无需等待进一步的数据加载。

  6. 提高性能和SEO：

    • 通过在服务器端将初始状态嵌入到 HTML 页面中，可以显著提高应用性能，因为客户端应用不需要在初始加载时重新获取数据。此外，搜索引擎（如谷歌）也可以看到服务器渲染的页面，有助于提高 SEO（搜索引擎优化）。

举例来说明这个机制的工作方式。假设你正在构建一个电子商务网站的 Angular 应用，该网站有一个商品列表页面，你希望在服务器端渲染时预加载一些商品数据。以下是示例：

  1. 服务器端渲染：

    在服务器端，你的 Angular 应用会加载商品列表数据，并将其序列化为 JSON 格式。然后，将该数据插入到 <script> 元素中：

    <script id="serverApp-state" type="application/json">
  `{"products": [ {"id": 1, "name": "Product A"}, {"id": 2, "name": "Product B"} ]}`
</script>

  2. 客户端加载：

    当用户在浏览器中访问你的网站时，浏览器会加载服务器端渲染的 HTML 页面。客户端应用程序会检索 <script> 元素中的数据，并使用它来初始化商品列表组件。这将导致商品列表页面在初始加载时就包含了一些商品数据，而不需要额外的网络请求。

这个机制对于提高网页性能，特别是在初始加载时减少数据请求以及对搜索引擎优化非常有用。通过传递初始状态，客户端应用可以更快地呈现内容，提供更好的用户体验。这是 Angular SSR Transfer State 机制的一个核心优势之一。