如何确认 SAP Spartacus SSR Transfer State 已经正常工作了

在检查一些客户项目时，我注意到一旦返回 SSR 响应，浏览器仍然会执行页面和组件的 XHR 请求。

我使用的代码为：

provideConfig(<StateConfig>{
      state: {
        ssrTransfer: {
          keys: { [CMS_FEATURE]: StateTransferType.TRANSFER_STATE },
        },
      },
    }),

在返回的 index.html 中，您可以检查 script 标签，默认情况下它的 id 应该是 spartacus-app-state ： <script id="spartacus-app-state" type="application/json">.

如果数据已经存在于 index.html 里，Spartacus 不应该执行 http 重新获取它。

CMS HTTP 请求总是被执行，以防后台发生变化。 如果您不经常更改 CMS，则可以考虑将 routing.loadStrategy 配置设置为 ONCE.

使用如下代码：

provideConfig(<RoutingConfig>{
      loadStrategy: RouteLoadStrategy.ONCE,
    }),

Chrome 开发者工具 console 面板，出现如下错误消息：

@ngrx/store: The feature name “siteContext” does not exist in the state, therefore createFeatureSelector cannot access it. Be sure it is imported in a loaded module using StoreModule.forRoot(‘siteContext’, …) or StoreModule.forFeature(‘siteContext’, …). If the default state is intended to be undefined, as is the case with router state, this development-only warning message can be ignored.

正确代码如下：

provideConfig(<RoutingConfig>{
      routing: { loadStrategy: RouteLoadStrategy.ONCE },
    }),

在 Spartacus 2.0 版之前，实现状态持久化的唯一方法是使用一种简单的声明性机制，称为 storageSync，它允许您提供属性键以在存储中持久化。之后，我们可以使用 Angular 提供的 Transfer State 机制来同步 SSR 和 CSR 之间的数据。配置的传输状态应该对数据的某些部分有效，但并非对所有数据都有效。 参见 cms-store.module.ts、product-store.module.ts 和 site-context-store.module.ts 的源代码。

Spartacus 在服务器上运行 XHR 请求，然后在应用程序引导时在客户端再次运行。 为了防止对已经在服务器上填充的状态进行不必要的后端调用，Spartacus 将 NgRx 状态的一部分包含在服务器端呈现的 HTML 中。

开发人员可以为 CMS 和产品（来自 NgRx 商店）配置状态转移，如以下示例所示：

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

开发人员还可以将配置缩小到特定的状态子部分，如以下示例所示：

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