溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關SAP Spartacus手動開啟服務器端渲染SSR所必須的步驟是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
使用服務器端渲染，我們可以保證搜索引擎，與瀏覽器的Javascript禁用，或沒有JavaScript的瀏覽器仍然可以訪問我們的網站內容。
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）的過程在服務器上生成靜態應用程序頁面。
打開文件src/app/app.module.ts并在NgModule元數據中找到BrowserModule導入。
將該導入替換為此：
如下圖所示：
使用以下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 函數。
網絡爬蟲不會像人類那樣導航到具有高度交互性的 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",
用于對服務端應用進行轉譯。
這些文件均需要手動修改：
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, // 客戶端應用的 AppModule
ServerModule, // 服務端的 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所必須的步驟是什么有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
