今天就跟大家聊聊有關(guān)SAP Spartacus手動(dòng)開(kāi)啟服務(wù)器端渲染SSR所必須的步驟是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

“專業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個(gè)人一直以來(lái)堅(jiān)持追求的企業(yè)文化。 創(chuàng)新互聯(lián)是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、軟件開(kāi)發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶需求為導(dǎo)向，結(jié)合用戶體驗(yàn)與視覺(jué)傳達(dá)，提供有針對(duì)性的項(xiàng)目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場(chǎng)，引領(lǐng)市場(chǎng)！

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

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)用的 AppModule
		ServerModule, // 服務(wù)端的 Angular 模塊
		ModuleMapLoaderModule, // 用于實(shí)現(xiàn)服務(wù)端的路由的惰性加載
		ServerTransferStateModule, // 在服務(wù)端導(dǎo)入，用于實(shí)現(xiàn)將狀態(tài)從服務(wù)器傳輸?shù)娇蛻舳薦,
	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è)面：

看完上述內(nèi)容，你們對(duì)SAP Spartacus手動(dòng)開(kāi)啟服務(wù)器端渲染SSR所必須的步驟是什么有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)站欄目：SAPSpartacus手動(dòng)開(kāi)啟服務(wù)器端渲染SSR所必須的步驟是什么
網(wǎng)址分享：http://jinyejixie.com/article12/ghhjgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、定制網(wǎng)站、搜索引擎優(yōu)化、網(wǎng)站設(shè)計(jì)公司、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)