使用服务器端渲染，我们可以保证搜索引擎，与浏览器的Javascript禁用，或没有JavaScript的浏览器仍然可以访问我们的网站内容。

https://b2bspastore.cg79x9wuu9-eccommerc1-p5-public.model-t.myhybris.cloud/powertools-spa/en/USD/

文档：https://sap.github.io/spartacus-docs/server-side-rendering-in-spartacus/#adding-ssr-support-using-schematics-recommended

package.json里添加如下依赖：

 "@angular/platform-server": "~10.1.0","@nguniversal/express-engine": "^10.1.0","@spartacus/setup": "^3.0.0-rc.2","express": "^4.15.2"

@angular/platform-server

允许我们在服务器上运行Angular应用程序的技术, 在Angular文档中称为Angular Universal.

Angular Universal通过称为服务器端渲染（SSR）的过程在服务器上生成静态应用程序页面。

根AppModule

打开文件src/app/app.module.ts并在NgModule元数据中找到BrowserModule导入。

将该导入替换为此：

BrowserModule.withServerTransition({appId : ‘your App-ID’ });

如下图所示：

使用以下AppServerModule代码在src/app/目录中创建一个app.server.module.ts文件：

import { NgModule } from '@angular/core';
import {ServerModule,ServerTransferStateModule,
} from '@angular/platform-server';
import { StorefrontComponent } from '@spartacus/storefront';
import { AppModule } from './app.module';@NgModule({imports: [// The AppServerModule should import your AppModule followed// by the ServerModule from @angular/platform-server.AppModule,ServerModule,ServerTransferStateModule,],// Since the bootstrapped component is not inherited from your// imported AppModule, it needs to be repeated here.bootstrap: [StorefrontComponent],
})
export class AppServerModule {}

使用以下代码在src目录中创建一个main.server.ts文件：

/**************************************************************************************************** Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.*/
import { enableProdMode } from '@angular/core';
import '@angular/localize/init';
import { environment } from './environments/environment';if (environment.production) {enableProdMode();
}
export { renderModule, renderModuleFactory } from '@angular/platform-server';
export { AppServerModule } from './app/app.server.module';

Angular在服务端渲染方面提供一套前后端同构解决方案，它就是 Angular Universal（统一平台），一项在服务端运行 Angular 应用的技术。

标准的 Angular 应用会执行在浏览器中，它会在 DOM 中渲染页面，以响应用户的操作。

而 Angular Universal 会在服务端通过一个被称为服务端渲染（server-side rendering - SSR）的过程生成静态的应用页面。

它可以生成这些页面，并在浏览器请求时直接用它们给出响应。它也可以把页面预先生成为 HTML 文件，然后把它们作为静态文件供服务端使用。

工作原理

要制作一个 Universal 应用，就要安装 platform-server 包。 platform-server 包提供了服务端的 DOM 实现、XMLHttpRequest 和其它底层特性，但不再依赖浏览器。

你要使用 platform-server 模块而不是 platform-browser 模块来编译这个客户端应用，并且在一个 Web 服务器上运行这个 Universal 应用。

服务器（下面的示例中使用的是 Node Express 服务器）会把客户端对应用页面的请求传给 renderModuleFactory 函数。

SEO

网络爬虫不会像人类那样导航到具有高度交互性的 Spartacus Angular 应用，并为其建立索引。

Angular Universal 可以为你生成应用的静态版本，它易搜索、可链接，浏览时也不必借助 JavaScript。它也让站点可以被预览，因为每个 URL 返回的都是一个完全渲染好的页面。

package.json里添加dev dependency：

 "ts-loader": "^6.0.4","@nguniversal/builders": "^10.1.0","@types/express": "^4.17.0",

用于对服务端应用进行转译。

这些文件均需要手动修改：

1. AppServerModule

import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';import { AppBrowserModule } from './app.module';
import { AppComponent } from './app.component';// 可以注册那些在 Universal 环境下运行应用时特有的服务提供商
@NgModule({imports: [AppBrowserModule, // 客户端应用的 AppModuleServerModule, // 服务端的 Angular 模块ModuleMapLoaderModule, // 用于实现服务端的路由的惰性加载ServerTransferStateModule, // 在服务端导入，用于实现将状态从服务器传输到客户端],bootstrap: [AppComponent],
})
export class AppServerModule {}

参考链接：https://www.cnblogs.com/laixiangran/p/8664480.html

服务端应用模块（习惯上叫作 AppServerModule）是一个 Angular 模块，它包装了应用的根模块 AppModule，以便 Universal 可以在你的应用和服务器之间进行协调。 AppServerModule 还会告诉 Angular 在把你的应用以 Universal 方式运行时，该如何引导它。

最后build的dist目录：

client side render(CSR，客户端渲染)模式下，第一个HTTP请求，返回的HTML页面里，cx-storefront标签是空的：

SSR模式下，第一个HTTP请求里，包含了服务器端渲染好的HTML页面：

也可以参考这个文档，进行SAP Spartacus SSR的调试：

How to Debug a Server–Side Rendered Storefront

另一个具体开启 SSR 的步骤

create fresh angular app $ ng new
enter the directory
install spartacus with ssr v3.1.0 using schematics $ng add @spartacus/schematics@3.1.0 --ssr
set backend baseUrl in app.module of the fresh app
disable ssr optimizations by passing null as a second argument of const ngExpressEngine = NgExpressEngineDecorator.get(engine, null); in the file server.ts of your fresh app
if your test backend doesn’t have proper SSL cert, please add at the top of the file server.ts the line:
process.env.NODE_TLS_REJECT_UNAUTHORIZED = ‘0’;
copy i18n JSON assets to your app:
cp ./node_modules/@spartacus/assets/i18n-assets ./src/assets -r
in app.module set i18n.debug to true and i18n.backend.loadPath to ‘assets/i18n-assets/{{lng}}/{{ns}}.json’,:
i18n: {
chunks: translationChunksConfig,
backend: {
loadPath: ‘assets/i18n-assets/{{lng}}/{{ns}}.json’,
},
debug: true,
},
disable Javascript in your browser
run $ yarn dev:ssr
open in the browser http://localhost:4200/

暂时禁用 SAP Spartacus 服务器端渲染引擎的方法

disable SSR Optimizations by passing null as a second parameter to:

NgExpressEngineDecorator.get(engine, null)

传一个 null 进去即可。

更多Jerry的原创文章，尽在：“汪子熙”:

SAP Spartacus 手动开启服务器端渲染 (SSR) 所必须的步骤相关推荐

大前端学习笔记 -- 搭建自己的服务器端渲染 (SSR)
搭建自己的服务器端渲染 (SSR) 一.渲染一个Vue实例 mkdir vue-ssr cd vue-ssr npm init -y npm i vue vue-server-renderder se ...
客户端渲染CSR、服务器端渲染SSR、预渲染Prerendering
什么是客户端渲染 CSR 在进行SPA(单页面应用)开发时,大多数都会选择Vue.js.默认情况下,会生成vue组件,输出到浏览器,进行生成 DOM 和操作 DOM.使用vue.js开发的项目在浏览器 ...
1. 服务器端渲染(SSR)简介
1. 服务器端渲染(SSR)简介 1.1 什么是服务器端渲染(SSR)? Vue.js 是构建客户端应用程序的框架默认情况下浏览器输出Vue组件,生成DOM并操作DOM 服务器端渲染则是服务器端生成 ...
服务器端渲染 (SSR)
什么是服务器端渲染 (SSR)? 客户端渲染:使用 JavaScript 框架进行页面渲染服务端渲染:服务端将HTML文本组装好,并返回给浏览器,这个HTML文本被浏览器解析之后,不需要经过 Jav ...
手动安装 SAP Spartacus 3.3.0版本并启用服务器端渲染 SSR
使用 ng new jerryssr 创建一个空的 Angular 项目: 确保项目创建成功. ng add @spartacus/schematics@latest --baseUrl https: ...
关于自定义的登录机制在SAP Spartacus服务器端渲染(SSR)实施过程中遇到的问题
问题背景某客户使用了第三方的Authentication service来实现Spartacus用户的登录机制: In our project we have integration with MD ...
关于 SAP Spartacus 服务器端渲染 SSR 无法使用窗口宽度以进行自适应设计的问题
Storefront 的屏幕布局由可配置的断点(configurable breakpoints)驱动.断点具有可配置的屏幕尺寸(即 < 576px),并且关联的屏幕名称可用于进一步定义布局. ...
以非生产模式的方式启用SAP Spartacus的服务器端渲染SSR
思路就是:在package.json里找到对应命令,去除–prod选项: ng build && ng run standalone:server 成功执行: server目录似乎被覆 ...
为什么使用服务器端渲染 (SSR)？
什么是 SSR SSR 顾名思义就是 Server-Side Render, 即服务端渲染.原理很简单,就是服务端直接渲染出 HTML 字符串模板,浏览器可以直接解析该字符串模版显示页面,因此首屏的内 ...

SAP Spartacus 手动开启服务器端渲染 (SSR) 所必须的步骤