ng add @spartacus/schematics --ssr

在用 SAP Spartacus 開發的 store 裡，能看到 devDependencies 裡具有 @spartacus/schematics 的依賴：

![](https://img-blog.csdnimg.cn/img_convert/6ef0ea98e0e046ca2d8f6f18228a4efd.png)

這是 SAP Spartacus Schematics 的一部分：https://sap.github.io/spartacus-docs/schematics.

> Spartacus schematics allow you to install Spartacus libraries in your project.

Spartacus Schematics 允許我們在自己的專案裡安裝 Spartacus 庫。SAP Spartacus Schematics 本身的幫助文件：https://github.com/SAP/spartacus/blob/develop/projects/schematics/README.md

命令：ng add @spartacus/schematics@latest

支援的一些重要 option：

* featureLevel sets the application feature level. The default value is the same as the version of the Spartacus packages you are working with. For example, the featureLevel for @spartacus/schematics@3.2.0 is 3.2.

featureLevel：設定應用的 feature level，預設值和 Spartacus package level 一致。

* ssr includes the server-side rendering (SSR) configuration.

做兩件事情：

1. Adds server-side rendering dependencies.
2. Provides additional files that are required for SSR.

使用 option 的語法：

ng add @spartacus/schematics@latest --baseUrl https://spartacus-demo.eastus.cloudapp.azure.com:8443/ --baseSite=apparel-uk-spa,electronics-spa --currency=gbp,usd --language=uk,en --ssr

# 手動新增 SSR support 步驟

1. package.json 裡新增依賴：

* "@angular/platform-server": "~10.1.0",
* "@nguniversal/express-engine": "^10.1.0"

https://github.com/angular/universal/tree/master/modules/express-engine

Express Engine 的作用是為了在伺服器端執行 Angular 應用讓其支援伺服器端渲染。

* "@spartacus/setup": "^3.0.0-rc.2",

![](https://img-blog.csdnimg.cn/img_convert/70ec0b7abf30ab592d13bda26d5e044f.png)

![](https://img-blog.csdnimg.cn/img_convert/d4b78d132e23d55a286e36d2cd9d050f.png)

![](https://img-blog.csdnimg.cn/img_convert/88281d10be44b10c37c801b4f3767ace.png)

* "express": "^4.15.2"

![](https://img-blog.csdnimg.cn/img_convert/1da3522a575a90362f79c8f585e2e951.png)

2. 新增下列 devDependencies 到 package.json 裡：

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

3. 新增下列指令碼到 package.json：

* "e2e": "ng e2e",
* "dev:ssr": "ng run <your-project-name>:serve-ssr" - 注意，不是 npm run，後者定義在 package.json 裡。

而這個 serve-ssr 定義在 angular.json 的 architect 區域裡：
![](https://img-blog.csdnimg.cn/img_convert/4c611057867da99c98012194c3e48453.png)

* "serve:ssr": "node dist/<your-project-name>/server/main.js",
* "build:ssr": "ng build --prod && ng run <your-project-name>:server:production",
* "prerender": "ng run <your-project-name>:prerender"

修改 src/main.ts:

之前的程式碼：

```typescript
 platformBrowserDynamic().bootstrapModule(AppModule);
```

修改之後的程式碼：

```typescript
 document.addEventListener("DOMContentLoaded", () => {
   platformBrowserDynamic().bootstrapModule(AppModule);
 });
```

這裡的 platformBrowserDynamic 是什麼意思？參考這篇知乎文章[什麼是 Angular Platforms - 深入理解 Angular Platforms](https://zhuanlan.zhihu.com/p/94570685)

Angular 框架的設計初衷是將其打造成一個獨立平臺。這樣的設計思路確保了 Angular 應用可以正常地跨環境執行 - 無論是在瀏覽器，服務端，web-worker 甚至是在移動裝置上。

當我們透過 Angular CLI 指令 ng new MyNewApplication 建立一個新的 Angular 應用時，應用的預設環境設定為瀏覽器環境。

platformBrowserDynamic 函式的返回結果是一個 PlatformRef。 PlatformRef 只是一個 Angular 服務，該服務知曉如何引導啟動 Angular 應用。

![](https://img-blog.csdnimg.cn/img_convert/a19cd6982d79e5dd267b760a85f6d180.png)

Angular 高度依賴於依賴注入系統。這也是為什麼 Angular 本身很大一部分內容被宣告為抽象服務的原因, 比如 Renderer2.

![](https://img-blog.csdnimg.cn/img_convert/db37afd3a35c9f1c90ecdc8a678f3025.png)

下圖中間藍色圓圈代表抽象類，上下的綠色和紫色，分別代表 Browser Platform 和 Server Platform 的具體實現。
![](https://img-blog.csdnimg.cn/img_convert/f07292ba4724b3256a80c058b37d1d65.png)

DomAdapter：

* BrowserDomAdapter - 瀏覽器平臺
* DominoAdapter - 伺服器端平臺，不與 DOM 進行互動，因為在服務端無法獲取 DOM.除此之外，其還會使用 domino library，在 node.js 環境中模擬 DOM.

app.module.ts: 
```typescript
BrowserModule.withServerTransition({ appId: 'spartacus-app' }),
```

> Configures a browser-based app to transition from a server-rendered app, if one is present on the page.

> @param params — An object containing an identifier for the app to transition. The ID must match between the client and server versions of the app.

BrowserTransferStateModule: NgModule to install on the client side while using the TransferState to transfer state from server to client.

https://angular.io/api/platform-browser/BrowserTransferStateModule

TransferState: A key value store that is transferred from the application on the server side to the application on the client side.

一個 key value 儲存結構，從伺服器端應用轉移到客戶端應用。

> TransferState will be available as an injectable token. To use it import ServerTransferStateModule on the server and BrowserTransferStateModule on the client.

# 關閉 PWA

> As soon as Spartacus is installed in PWA mode, a service worker is installed, and it serves a cached version of index.html, along with the js files. This results in SSR being completely skipped.

Spartacus 如果以 PWA 模式安裝，則 service worker 啟動，提供一個快取後的 index.html, 以及相關的 JavaScript 檔案。這會導致 SSR 完全被忽略掉。

在程式碼裡關閉 PWA：

```typescript
StorefrontModule.withConfig({
       backend: {
         occ: {
           baseUrl: 'https://[your_enpdoint],
         },
       },
       pwa: {
         enabled: false,
       },
 };
```</your-project-name></your-project-name></your-project-name></your-project-name>

手動為 SAP Spartacus 新增 SSR 即伺服器端渲染的步驟

相關文章