Spartacus中如何为CSR与SSR应用配置不同的OCC baseUrl

默认情况下，Spartacus的SSR（服务端渲染）和CSR（客户端渲染）应用会共用同一个OCC baseUrl配置，示例代码如下：

provideConfig({
  backend: {
    occ: {
      baseUrl: 'https://some.baseUrl.com'
    },
  },
}),

要为两者配置不同的OCC baseUrl，有两种常用方案：

方案一：通过平台环境判断动态配置 #

利用Angular提供的isPlatformBrowser和isPlatformServer工具，在配置时区分当前运行环境，设置对应的baseUrl：

1. 编写动态配置函数：

import { PLATFORM_ID, inject } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import { provideConfig } from '@spartacus/core';

export function provideOccConfig() {
  const platformId = inject(PLATFORM_ID);
  // 根据当前平台设置不同的baseUrl
  const baseUrl = isPlatformBrowser(platformId) 
    ? 'https://csr-your-domain.com' 
    : 'https://ssr-your-domain.com';

  return provideConfig({
    backend: {
      occ: {
        baseUrl: baseUrl
      },
    },
  });
}

2. 在应用模块中引入该配置函数：

@NgModule({
  providers: [
    provideOccConfig(),
    // 其他原有配置
  ]
})
export class AppModule {}

方案二：在SSR入口单独覆盖配置 #

Spartacus的SSR启动入口是server.ts，可以在这里单独配置SSR专属的OCC baseUrl，不会影响CSR的配置：

import { provideConfig } from '@spartacus/core';
// 其他必要导入

export async function app(): Promise<express.Express> {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/storefront/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  const app = await bootstrapApplication(AppComponent, {
    providers: [
      provideServerRendering(),
      // 覆盖SSR的OCC baseUrl
      provideConfig({
        backend: {
          occ: {
            baseUrl: 'https://ssr-your-domain.com'
          }
        }
      }),
      // 原有CSR配置保持不变
      provideConfig(/* 你的原有CSR配置 */),
    ],
  });

  // 后续服务器配置代码
}

这种方式下，CSR会使用原有配置中的baseUrl，SSR则使用server.ts中单独配置的地址。

内容的提问来源于stack exchange，提问作者Krzysztof Platis