关于 SAP 电商云 Spartacus UI Transfer State 冗余 API 请求发送的讨论

Angular 的 TransferState 类使服务器端渲染 (SSR) 和预渲染 (Prerendered-SSR) Angular 应用程序能够使用从服务器获取的数据并且有效地在浏览器中渲染。

如果您使用的是 SSR 或预渲染应用程序策略，那么该过程大致是这样的：

• 在服务器上预渲染或渲染应用程序
• 浏览器获取呈现的 HTML 和 CSS 并显示“静态”应用程序
• 浏览器获取、解析、解释和执行 JavaScript
• Angular 应用程序被引导，用新的“正在运行”的应用程序替换整个 DOM 树
• 应用程序已初始化，通常从远程服务器或 API 获取数据
• 用户与应用程序交互

这个场景有两个问题：

• DOM hydration 会重复替换整个节点树并重新绘制应用程序
• 应用程序会重复获取理论上已经读取过的数据，并由于 SSR 或预渲染站点策略而显示给用户

第一个问题是目前在 Angular 中没有解决的问题，但是，第二个问题已经有了解决方案，这就是本文论述的 Angular TransferState 机制。

Transfer State 是一种策略：

• 使用 SSR 或预渲染策略获取渲染完整“静态”应用程序所需的数据
• 序列化数据，并使用初始文档 (HTML) 响应发送数据
• 在应用程序初始化时，在运行时解析序列化数据，避免数据的冗余获取

从技术上讲，数据通过 JSON.stringify() 序列化并通过 JSON.parse() 解析。但是，通常我们不需要担心这一点，因为这是由 Angular 中的 TransferState 服务为我们执行的。

即使服务器在 SSR 模式下工作，在 Chrome 浏览器 network 里，仍然能观察到 CMS OCC API 的调用。

已经开启了 products 和 cms 的 ssrTransfer：

ConfigModule.withConfig({
  state: {
    ssrTransfer: {
      keys: {
        products: true,
        cms: true
      }
    }
  }
});

• products：确实在客户端没有观察到 OCC API 调用去读取 product 数据。
• cms：默认情况下，每次 route 发生变化时，Spartacus 都会重新加载 CMS 页面数据，不管它是否已经存在于 ngrx store 里。

客户可以通过修改配置项：Spartacus config routing.loadStrategy: RouteLoadStrategy.ONCE 来更改这个行为。

以上逻辑实现于 CmsPageGuard.shouldReload 方法里。