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 方法里。