乐趣区

关于前端:如何确认-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,
      },
    },
  }
});
退出移动版