关于 Spartacus CMS 请求响应是否应该被 Transfer State 机制 cover 的问题

发布时间 2023-10-11 22:35:03作者: JerryWang_汪子熙

Spartacus 默认设置是 CMS 请求会在 CSR 和 SSR 两种环境下都执行,动机是应对在页面渲染过程中,Back-Office 有变化发生的情况。

如果确实只希望 CMS 只在 SSR 端执行,将 routing.loadStrategy 改成 ONCE 即可。

这个 Stackoverflow 帖子做了详细说明。

打开上面的 cms-store.module.ts 代码:

这段代码是关于Angular中Transfer State配置的部分,它用于服务器端渲染(Server-Side Rendering,SSR)时的数据传输。让我逐步解释这段代码的含义,并提供一些示例来说明。

首先,让我们看一下这个代码块的导出函数 cmsStoreConfigFactory()

export function cmsStoreConfigFactory(): StateConfig {
  // ...
}

这个函数是一个工厂函数,用于创建一个名为 StateConfig 的配置对象,并将其导出。StateConfig 是Angular中用于配置状态管理的一种方式,通常与服务器端渲染(SSR)一起使用。

接下来,让我们来看配置对象的内容:

const config: StateConfig = {
  state: {
    ssrTransfer: {
      keys: { [CMS_FEATURE]: StateTransferType.TRANSFER_STATE },
    },
  },
};

这个配置对象的主要部分是 state 属性,它定义了状态的配置。在这个配置中,有一个名为 ssrTransfer 的属性,它是与服务器端渲染(SSR)相关的配置:

  1. ssrTransfer: 这是一个包含在状态配置中的对象,用于定义服务器端渲染期间数据传输的规则。

  2. keys: 这是一个包含了数据传输规则的对象。在这个对象中,我们使用了一个动态的键,[CMS_FEATURE],它的值是 StateTransferType.TRANSFER_STATE

接下来,让我解释这两个关键部分的含义:

  • [CMS_FEATURE]: 这是一个动态的键,它的值是一个在某个地方定义的常量,被用作传输规则的键。根据代码的注释,它似乎是与内容管理系统(CMS)相关的一个功能或特性的标识符。这个键的值将用于在服务器端和客户端之间传输数据。

  • StateTransferType.TRANSFER_STATE: 这是一个状态传输类型的常量,表示在服务器端和客户端之间传输状态。这意味着在服务器端渲染时,特定于 [CMS_FEATURE] 的状态将被传输到客户端,以便在客户端进行渲染时使用。

现在,让我通过一个示例来说明这个配置的作用。假设我们有一个Angular应用,其中使用了服务器端渲染,并且有一个名为 CMS_FEATURE 的特性。在某个页面中,我们从服务器端获取了一些特定于 CMS_FEATURE 的数据,例如页面内容。在服务器端渲染期间,使用上述配置,我们可以将这个特定数据的状态传输到客户端,以便客户端可以使用它进行渲染,而不必再次从服务器请求相同的数据。

这个配置的关键之处在于它允许在服务器端和客户端之间有效地传输状态,以提高应用的性能和加载速度,特别是在服务器端渲染的情况下。

总结一下,这段代码中的 cmsStoreConfigFactory() 函数导出了一个配置对象,用于定义服务器端渲染期间数据传输的规则。这个规则允许特定于 [CMS_FEATURE] 的状态在服务器端和客户端之间传输,以提高应用的性能。示例中的常量 [CMS_FEATURE]StateTransferType.TRANSFER_STATE 表示了传输规则的关键部分。这个配置对象通常与Angular的状态管理机制一起使用,以实现服务器端渲染时的状态传输。