确认 SAP Spartacus SSR 传输状态是否正常运行

优化 SAP Spartacus SSR 性能：消除冗余 XHR 请求

了解问题

在使用 SAP Spartacus 构建单页面应用程序 (SPA) 时，服务器端渲染 (SSR) 可显着提高初始页面加载性能。然而，有时候即使在接收到 SSR 响应后，浏览器仍会向页面和组件发出不必要的 XHR 请求，这可能会降低应用程序的响应能力和用户体验。

根源追溯

这一问题往往源于服务器端传输状态处理不当。SSR 传输状态包含在服务器端渲染期间收集的页面和组件数据，它应该在浏览器窗口对象中填充，以避免浏览器发出额外的 XHR 请求。

解决方案：

1. 启用 transferHttpState 配置

要解决此问题，必须在服务器端启用 transferHttpState 配置。这告诉 Angular 将 HTTP 状态从服务器端传输到客户端。

@NgModule({
  imports: [
    // ...
    HttpTransferStateModule.forRoot({
      transferHttpState: true
    })
    // ...
  ]
})
export class SpartacusConfigurationModule { }

2. 检查 <script> 标签

在生成的 index.html 文件中，检查 <script> 标签。它应该包含以下代码：

<script>
  window.RENDER_JSON_DATA = window.SSR_TRANSFER_STATE;
  window.INITIAL_PAGE_DATA = window.RENDER_JSON_DATA;
  window.INITIAL_NAVIGATION_DATA = window.RENDER_JSON_DATA.navigationData;
  // ...
</script>

确保此代码已注入浏览器窗口对象，否则可能会导致未预期的 XHR 请求。

3. 使用浏览器开发工具进行故障排除

浏览器开发工具（例如 Chrome DevTools）可用于检查 XHR 请求。在 "Network" 选项卡中，查看发出的请求并检查响应的内容。这有助于识别未预期的请求并进行故障排除。

结论

通过上述步骤，可以优化 SAP Spartacus SSR 应用程序性能，消除冗余 XHR 请求。这将提高应用程序的响应能力，并为用户提供更好的整体体验。

常见问题解答

1. 启用 transferHttpState 会有什么影响？

启用 transferHttpState 会在服务器端渲染期间将 HTTP 状态从服务器端传输到客户端，从而填充浏览器窗口对象中的数据，避免浏览器发出不必要的 XHR 请求。

2. <script> 标签的作用是什么？

<script> 标签将 SSR 传输状态数据注入浏览器窗口对象。确保此代码已正确注入，否则可能会导致未预期的 XHR 请求。

3. 如何使用浏览器开发工具进行故障排除？

浏览器开发工具（例如 Chrome DevTools）可用于检查 XHR 请求。在 "Network" 选项卡中，查看发出的请求并检查响应的内容。这有助于识别未预期的请求并进行故障排除。

4. 消除冗余 XHR 请求有什么好处？

消除冗余 XHR 请求可以提高应用程序的响应能力，减少页面加载时间，并为用户提供更好的整体体验。

5. 如何判断是否成功解决了该问题？

通过使用浏览器开发工具检查 XHR 请求，可以判断是否成功解决了该问题。如果未再发出不必要的 XHR 请求，则该问题已得到解决。