使用服務(wù)器端渲染，我們可以保證搜索引擎，與瀏覽器的Javascript禁用，或沒(méi)有JavaScript的瀏覽器仍然可以訪問(wèn)我們的網(wǎng)站內(nèi)容。

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

允許我們?cè)诜?wù)器上運(yùn)行Angular應(yīng)用程序的技術(shù), 在Angular文檔中稱為Angular Universal.

Angular Universal通過(guò)稱為服務(wù)器端渲染（SSR）的過(guò)程在服務(wù)器上生成靜態(tài)應(yīng)用程序頁(yè)面。

根AppModule

打開(kāi)文件src/app/app.module.ts并在NgModule元數(shù)據(jù)中找到BrowserModule導(dǎo)入。

將該導(dǎo)入替換為此：

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

如下圖所示：

使用以下AppServerModule代碼在src/app/目錄中創(chuàng)建一個(gè)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目錄中創(chuàng)建一個(gè)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在服務(wù)端渲染方面提供一套前后端同構(gòu)解決方案，它就是 Angular Universal（統(tǒng)一平臺(tái)），一項(xiàng)在服務(wù)端運(yùn)行 Angular 應(yīng)用的技術(shù)。

標(biāo)準(zhǔn)的 Angular 應(yīng)用會(huì)執(zhí)行在瀏覽器中，它會(huì)在 DOM 中渲染頁(yè)面，以響應(yīng)用戶的操作。

而 Angular Universal 會(huì)在服務(wù)端通過(guò)一個(gè)被稱為服務(wù)端渲染（server-side rendering - SSR）的過(guò)程生成靜態(tài)的應(yīng)用頁(yè)面。

它可以生成這些頁(yè)面，并在瀏覽器請(qǐng)求時(shí)直接用它們給出響應(yīng)。 它也可以把頁(yè)面預(yù)先生成為 HTML 文件，然后把它們作為靜態(tài)文件供服務(wù)端使用。

工作原理

要制作一個(gè) Universal 應(yīng)用，就要安裝 platform-server 包。 platform-server 包提供了服務(wù)端的 DOM 實(shí)現(xiàn)、XMLHttpRequest 和其它底層特性，但不再依賴瀏覽器。

你要使用 platform-server 模塊而不是 platform-browser 模塊來(lái)編譯這個(gè)客戶端應(yīng)用，并且在一個(gè) Web 服務(wù)器上運(yùn)行這個(gè) Universal 應(yīng)用。

服務(wù)器（下面的示例中使用的是 Node Express 服務(wù)器）會(huì)把客戶端對(duì)應(yīng)用頁(yè)面的請(qǐng)求傳給 renderModuleFactory 函數(shù)。

SEO

網(wǎng)絡(luò)爬蟲(chóng)不會(huì)像人類那樣導(dǎo)航到具有高度交互性的 Spartacus Angular 應(yīng)用，并為其建立索引。

Angular Universal 可以為你生成應(yīng)用的靜態(tài)版本，它易搜索、可鏈接，瀏覽時(shí)也不必借助 JavaScript。它也讓站點(diǎn)可以被預(yù)覽，因?yàn)槊總€(gè) URL 返回的都是一個(gè)完全渲染好的頁(yè)面。

package.json里添加dev dependency：

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

• 用于對(duì)服務(wù)端應(yīng)用進(jìn)行轉(zhuǎn)譯。

這些文件均需要手動(dòng)修改：

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';// 可以注冊(cè)那些在 Universal 環(huán)境下運(yùn)行應(yīng)用時(shí)特有的服務(wù)提供商 @NgModule({imports: [AppBrowserModule, // 客戶端應(yīng)用的 AppModuleServerModule, // 服務(wù)端的 Angular 模塊ModuleMapLoaderModule, // 用于實(shí)現(xiàn)服務(wù)端的路由的惰性加載ServerTransferStateModule, // 在服務(wù)端導(dǎo)入，用于實(shí)現(xiàn)將狀態(tài)從服務(wù)器傳輸?shù)娇蛻舳?/span>],bootstrap: [AppComponent], }) export class AppServerModule { }

參考鏈接：https://www.cnblogs.com/laixiangran/p/8664480.html

服務(wù)端應(yīng)用模塊（習(xí)慣上叫作 AppServerModule）是一個(gè) Angular 模塊，它包裝了應(yīng)用的根模塊 AppModule，以便 Universal 可以在你的應(yīng)用和服務(wù)器之間進(jìn)行協(xié)調(diào)。 AppServerModule 還會(huì)告訴 Angular 在把你的應(yīng)用以 Universal 方式運(yùn)行時(shí)，該如何引導(dǎo)它。

最后build的dist目錄：

client side render(CSR，客戶端渲染)模式下，第一個(gè)HTTP請(qǐng)求，返回的HTML頁(yè)面里，cx-storefront標(biāo)簽是空的：

SSR模式下，第一個(gè)HTTP請(qǐng)求里，包含了服務(wù)器端渲染好的HTML頁(yè)面：

也可以參考這個(gè)文檔，進(jìn)行SAP Spartacus SSR的調(diào)試：

How to Debug a Server–Side Rendered Storefront

另一個(gè)具體開(kāi)啟 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 ‘a(chǎn)ssets/i18n-assets/{{lng}}/{{ns}}.json’,:
i18n: {
chunks: translationChunksConfig,
backend: {
loadPath: ‘a(chǎn)ssets/i18n-assets/{{lng}}/{{ns}}.json’,
},
debug: true,
},

disable Javascript in your browser

run $ yarn dev:ssr

open in the browser http://localhost:4200/

暫時(shí)禁用 SAP Spartacus 服務(wù)器端渲染引擎的方法

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

NgExpressEngineDecorator.get(engine, null)

傳一個(gè) null 進(jìn)去即可。

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的SAP Spartacus 手动开启服务器端渲染 (SSR) 所必须的步骤的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。