关于|关于 SAP 电商云 Spartacus UI Transfer State 冗余 API 请求发送的讨论
Angular 的 TransferState 类使服务器端渲染 (SSR) 和预渲染 (Prerendered-SSR) Angular 应用程序能够使用从服务器获取的数据并且有效地在浏览器中渲染。
如果您使用的是 SSR 或预渲染应用程序策略，那么该过程大致是这样的：
- 在服务器上预渲染或渲染应用程序
- 浏览器获取呈现的 HTML 和 CSS 并显示“静态”应用程序
- 浏览器获取、解析、解释和执行 JavaScript
- Angular 应用程序被引导，用新的“正在运行”的应用程序替换整个 DOM 树
- 应用程序已初始化，通常从远程服务器或 API 获取数据
- 用户与应用程序交互
- DOM hydration 会重复替换整个节点树并重新绘制应用程序
- 应用程序会重复获取理论上已经读取过的数据，并由于 SSR 或预渲染站点策略而显示给用户
Transfer State 是一种策略：
- 使用 SSR 或预渲染策略获取渲染完整“静态”应用程序所需的数据
- 序列化数据，并使用初始文档 (HTML) 响应发送数据
- 在应用程序初始化时，在运行时解析序列化数据，避免数据的冗余获取
即使服务器在 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 里。
以上逻辑实现于 CmsPageGuard.shouldReload 方法里。
推荐阅读
- 关于缺少编程基础的朋友想转行|关于缺少编程基础的朋友想转行 ABAP 开发岗提出的一些咨询问题和解答
- 投稿|关于白鲟灭绝，鲜为人知的几个细节
- 关于HTTP和HTTPS的区别
- ssm+mysql实现零食商城系统(电商购物)
- 母亲（四）
- 关于项目管理的反思
- 嵌入式|通讯协议（2）—— SPI
- 离开
- “标准”问题
- 关于以后的朋友