一文探究Angular中的伺服器端渲染(SSR)

一般來說，普通的 Angular 應用是在 瀏覽器 中執行，在 DOM 中對頁面進行渲染，並與使用者進行互動。而 Angular Universal 是在 伺服器端 進行渲染（Server-Side Rendering，SSR），生成靜態的應用程式網頁，然後在使用者端展示，好處是可以更快地進行渲染，在提供完整的互動之前就可以為使用者提供內容展示。【相關教學推薦：《》】

本文是在 Angular 14 環境中完成，有些內容對於新的 Angular 版本可能並不適用，請參考 Angular 官方檔案。

使用 SSR 的好處

對 SEO 更加友好

雖然現在包括 Google 在內的某些搜尋引擎和社交媒體聲稱已經能支援對由 JavaScript（JS）驅動的 SPA（Single-Page Application）應用進行爬取，但是結果似乎差強人意。靜態 HTML 網站的 SEO 表現還是要好於動態網站，這也是 Angular 官網所持有的觀點（Angular 可是 Google 的！）。

Universal 可以生成無 JS 的靜態版本的應用程式，對搜尋、外連、導航的支援更好。

提高行動端的效能

某些行動端裝置可能不支援 JS 或者對 JS 的支援非常有限，導致網站的存取體驗非常差。這種情況下，我們需要提供無 JS 版本的應用，以便為使用者提供更好的體驗。

更快地展示首頁

對於使用者的使用體驗來說，首頁展示速度的快慢至關重要。根據 ，搜尋結果的展示速度每提高 100 毫秒，「新增至購物車」的使用率就提高 0.5%。

使用了 Universal 之後，應用程式的首頁會以完整的形態展示給使用者，這是純的 HTML 網頁，即使不支援 JS，也可以展示。此時，網頁雖然不能處理瀏覽器的事件，但是支援通過 routerLink 進行跳轉。

這麼做的好處是，我們可以先用靜態網頁抓住使用者的注意力，在使用者瀏覽網頁的時候，同時載入整個 Angular 應用。這給了使用者一個非常好的極速載入的體驗。

為專案增加 SSR

Angular CLI 可以幫助我們非常便捷的將一個普通的 Angular 專案轉變為一個帶有 SSR 的專案。建立伺服器端應用只需要一個命令：

ng add @nguniversal/express-engine

建議在執行該命令之前先提交所有的改動。

這個命令會對專案做如下修改：

• 新增伺服器端檔案：

  • main.server.ts - 伺服器端主程式檔案
  • app/app.server.module.ts - 伺服器端應用程式主模組
  • tsconfig.server.json - TypeScript 伺服器端組態檔
  • server.ts - web server 的執行檔案

• 修改的檔案：

  • package.json - 新增 SSR 所需要的依賴和執行指令碼
  • angular.json - 新增開發、構建 SSR 應用所需要的設定

在 package.json 中，會自動新增一些 npm 指令碼：dev:ssr 用於在開發環境執行 SSR 版本；serve:ssr 用於直接執行 build 或 prerender 後的網頁；build:ssr 構建 SSR 版本的網頁；prerender 構建預渲染後的網頁，與 build 不同，這裡會根據提供的 routes 生成這些頁面的 HTML 檔案。

替換瀏覽器 API

由於 Universal 應用不是在瀏覽器中執行，因此一些瀏覽器的 API 或功能將不可用。例如，伺服器端應用是無法使用瀏覽器中的全域性物件 window、document，navigator，location。

Angular 提供了兩個可注入物件，用於在伺服器端替換對等的物件：Location 和 DOCUMENT。

例如，在瀏覽器中，我們通過 window.location.href 獲取當前瀏覽器的地址，而改成 SSR 之後，程式碼如下：

import { Location } from '@angular/common';
 
export class AbmNavbarComponent implements OnInit{
  // ctor 中注入 Location
  constructor(private _location:Location){
    //...
  }
 
  ngOnInit() {
    // 列印當前地址
    console.log(this._location.path(true));
  }
}

同樣，對於在瀏覽器使用 document.getElementById() 獲取 DOM 元素，在改成 SSR 之後，程式碼如下：

import { DOCUMENT } from '@angular/common';
 
export class AbmFoxComponent implements OnInit{
  // ctor 中注入 DOCUMENT
  constructor(@Inject(DOCUMENT) private _document: Document) { }
 
  ngOnInit() {
    // 獲取 id 為 fox-container 的 DOM
    const container = this._document.getElementById('fox-container');
  }
}

使用 URL 絕對地址

在 Angular SSR 應用中，HTTP 請求的 URL 地址必須為 絕對地址（即，以 http/https 開頭的地址，不能是相對地址，如 /api/heros）。Angular 官方推薦將請求的 URL 全路徑設定到 renderModule() 或 renderModuleFactory() 的 options 引數中。但是在 v14 自動生成的程式碼中，並沒有顯式呼叫這兩個方法的程式碼。而通過讀 Http 請求的攔截，也可以達到同樣的效果。

下面我們先準備一個攔截器，假設檔案位於專案的 shared/universal-relative.interceptor.ts 路徑：

import { HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Inject, Injectable, Optional } from '@angular/core';
import { REQUEST } from '@nguniversal/express-engine/tokens';
import { Request } from 'express';
 
// 忽略大小寫檢查
const startsWithAny = (arr: string[] = []) => (value = '') => {
    return arr.some(test => value.toLowerCase().startsWith(test.toLowerCase()));
};
 
// http, https, 相對協定地址
const isAbsoluteURL = startsWithAny(['http', '//']);
 
@Injectable()
export class UniversalRelativeInterceptor implements HttpInterceptor {
    constructor(@Optional() @Inject(REQUEST) protected request: Request) { }
 
    intercept(req: HttpRequest<any>, next: HttpHandler) {
        // 不是絕對地址的 URL
        if (!isAbsoluteURL(req.url)) {
            let protocolHost: string;
            if (this.request) {
                // 如果注入的 REQUEST 不為空，則從注入的 SSR REQUEST 中獲取協定和地址
                protocolHost = `${this.request.protocol}://${this.request.get(
                    'host'
                )}`;
            } else {
                // 如果注入的 REQUEST 為空，比如在進行 prerender build：
                // 這裡需要新增自定義的地址字首，比如我們的請求都是從 abmcode.com 來。
                protocolHost = 'https://www.abmcode.com';
            }
            const pathSeparator = !req.url.startsWith('/') ? '/' : '';
            const url = protocolHost + pathSeparator + req.url;
            const serverRequest = req.clone({ url });
            return next.handle(serverRequest);
 
        } else {
            return next.handle(req);
        }
    }
}

然後在 app.server.module.ts 檔案中 provide 出來：

import { UniversalRelativeInterceptor } from './shared/universal-relative.interceptor';
// ... 其他 imports

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    // 如果你用了 @angular/flext-layout，這裡也需要引入伺服器端模組
    FlexLayoutServerModule, 
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: UniversalRelativeInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule { }

這樣任何對於相對地址的請求都會自動轉換為絕對地址請求，在 SSR 的場景下不會再出問題。

Prerender 預渲染靜態 HTML

經過上面的步驟後，如果我們通過 npm run build:ssr 構建專案，你會發現在 dist/<your project>/browser 下面只有 index.html 檔案，開啟檔案檢視，發現其中還有 <app-root></app-root> 這樣的元素，也就是說你的網頁內容並沒有在 html 中生成。這是因為 Angular 使用了動態路由，比如 /product/:id 這種路由，而頁面的渲染結果要經過 JS 的執行才能知道，因此，Angular 使用了 Express 作為 Web 伺服器，能在伺服器端執行時根據使用者請求（爬蟲請求）使用模板引擎生成靜態 HTML 介面。

而 prerender（npm run prerender）會在構建時生成靜態 HTML 檔案。比如我們做企業官網，只有幾個頁面，那麼我們可以使用預渲染技術生成這幾個頁面的靜態 HTML 檔案，避免在執行時動態生成，從而進一步提升網頁的存取速度和使用者體驗。

預渲染路徑設定

需要進行預渲染（預編譯 HTML）的網頁路徑，可以有幾種方式進行提供：

• 通過命令列的附加引數:

  ng run <app-name>:prerender --routes /product/1 /product/2

  登入後複製

• 如果路徑比較多，比如針對 product/:id 這種動態路徑，則可以使用一個路徑檔案：

  routes.txt

  /products/1
  /products/23
  /products/145
  /products/555

  登入後複製

  然後在命令列引數指定該檔案：

  ng run <app-name>:prerender --routes-file routes.txt

  登入後複製

• 在專案的 angular.json 檔案設定需要的路徑：

   "prerender": {
     "builder": "@nguniversal/builders:prerender",
     "options": {
       "routes": [ // 這裡設定
         "/",
         "/main/home",
         "/main/service",
         "/main/team",
         "/main/contact"
       ]
     },

  登入後複製

設定完成後，重新執行預渲染命令（npm run prerender 或者使用命令列引數則按照上面<1><2>中的命令執行），編譯完成後，再開啟 dist/<your project>/browser 下的 index.html 會發現裡面沒有 <app-root></app-root> 了，取而代之的是主頁的實際內容。同時也生成了相應的路徑目錄以及各個目錄下的 index.html 子頁面檔案。

SEO 優化

SEO 的關鍵在於對網頁 title，keywords 和 description 的收錄，因此對於我們想要讓搜尋引擎收錄的網頁，可以修改程式碼提供這些內容。

在 Angular 14 中，如果路由介面通過 Routes 設定，可以將網頁的靜態 title 直接寫在路由的設定中：

{ path: 'home', component: AbmHomeComponent, title: '<你想顯示在瀏覽器 tab 上的標題>' },

另外，Angular 也提供了可注入的 Title 和 Meta 用於修改網頁的標題和 meta 資訊：

import { Meta, Title } from '@angular/platform-browser';
 
export class AbmHomeComponent implements OnInit {
 
  constructor(
    private _title: Title,
    private _meta: Meta,
  ) { }
 
  ngOnInit() {
    this._title.setTitle('<此頁的標題>');
    this._meta.addTags([
      { name: 'keywords', content: '<此頁的 keywords，以英文逗號隔開>' },
      { name: 'description', content: '<此頁的描述>' }
    ]);
  }
}

總結

Angular 作為 SPA 企業級開發框架，在模組化、團隊合作開發方面有自己獨到的優勢。在進化到 v14 這個版本中提供了不依賴 NgModule 的獨立 Component 功能，進一步簡化了模組化的架構。

Angular Universal 主要關注將 Angular App 如何進行伺服器端渲染和生成靜態 HTML，對於使用者互動複雜的 SPA 並不推薦使用 SSR。針對頁面數量較少、又有 SEO 需求的網站或系統，則可以考慮使用 Universal 和 SSR 技術。

更多程式設計相關知識，請存取：！！

以上就是一文探究Angular中的伺服器端渲染(SSR)的詳細內容，更多請關注TW511.COM其它相關文章！