共计 1005 个字符，预计需要花费 3 分钟才能阅读完成。
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 办法里。
正文完
