深入淺析Angular SSR

更新時(shí)間：2022年11月06日 11:13:05 作者：世開(kāi)Coding

Angular Universal 主要關(guān)注將 Angular App 如何進(jìn)行服務(wù)端渲染和生成靜態(tài) HTML，對(duì)于用戶(hù)交互復(fù)雜的 SPA 并不推薦使用 SSR，本文是在 Angular 14 環(huán)境中完成，有些內(nèi)容對(duì)于新的 Angular 版本可能并不適用，感興趣的朋友一起通過(guò)本文學(xué)習(xí)

一般來(lái)說(shuō)，普通的 Angular 應(yīng)用是在瀏覽器中運(yùn)行，在 DOM 中對(duì)頁(yè)面進(jìn)行渲染，并與用戶(hù)進(jìn)行交互。而 Angular Universal 是在服務(wù)端進(jìn)行渲染（Server-Side Rendering，SSR），生成靜態(tài)的應(yīng)用程序網(wǎng)頁(yè)，然后在客戶(hù)端展示，好處是可以更快地進(jìn)行渲染，在提供完整的交互之前就可以為用戶(hù)提供內(nèi)容展示。

本文是在 Angular 14 環(huán)境中完成，有些內(nèi)容對(duì)于新的 Angular 版本可能并不適用，請(qǐng)參考 Angular 官方文檔。

使用 SSR 的好處

對(duì) SEO 更加友好

雖然現(xiàn)在包括 Google 在內(nèi)的某些搜索引擎和社交媒體聲稱(chēng)已經(jīng)能支持對(duì)由 JavaScript（JS）驅(qū)動(dòng)的 SPA（Single-Page Application）應(yīng)用進(jìn)行爬取，但是結(jié)果似乎差強(qiáng)人意。靜態(tài) HTML 網(wǎng)站的 SEO 表現(xiàn)還是要好于動(dòng)態(tài)網(wǎng)站，這也是 Angular 官網(wǎng)所持有的觀點(diǎn)（Angular 可是 Google 的?。?/p>

Universal 可以生成無(wú) JS 的靜態(tài)版本的應(yīng)用程序，對(duì)搜索、外鏈、導(dǎo)航的支持更好。

提高移動(dòng)端的性能

某些移動(dòng)端設(shè)備可能不支持 JS 或者對(duì) JS 的支持非常有限，導(dǎo)致網(wǎng)站的訪(fǎng)問(wèn)體驗(yàn)非常差。這種情況下，我們需要提供無(wú) JS 版本的應(yīng)用，以便為用戶(hù)提供更好的體驗(yàn)。

更快地展示首頁(yè)

對(duì)于用戶(hù)的使用體驗(yàn)來(lái)說(shuō)，首頁(yè)展示速度的快慢至關(guān)重要。根據(jù) eBay 的數(shù)據(jù)，搜索結(jié)果的展示速度每提高 100 毫秒，“添加至購(gòu)物車(chē)”的使用率就提高 0.5%。

使用了 Universal 之后，應(yīng)用程序的首頁(yè)會(huì)以完整的形態(tài)展示給用戶(hù)，這是純的 HTML 網(wǎng)頁(yè)，即使不支持 JS，也可以展示。此時(shí)，網(wǎng)頁(yè)雖然不能處理瀏覽器的事件，但是支持通過(guò) routerLink 進(jìn)行跳轉(zhuǎn)。

這么做的好處是，我們可以先用靜態(tài)網(wǎng)頁(yè)抓住用戶(hù)的注意力，在用戶(hù)瀏覽網(wǎng)頁(yè)的時(shí)候，同時(shí)加載整個(gè) Angular 應(yīng)用。這給了用戶(hù)一個(gè)非常好的極速加載的體驗(yàn)。

為項(xiàng)目增加 SSR

Angular CLI 可以幫助我們非常便捷的將一個(gè)普通的 Angular 項(xiàng)目轉(zhuǎn)變?yōu)橐粋€(gè)帶有 SSR 的項(xiàng)目。創(chuàng)建服務(wù)端應(yīng)用只需要一個(gè)命令：

ng add @nguniversal/express-engine

建議在運(yùn)行該命令之前先提交所有的改動(dòng)。

這個(gè)命令會(huì)對(duì)項(xiàng)目做如下修改：

添加服務(wù)端文件：
- main.server.ts - 服務(wù)端主程序文件
- app/app.server.module.ts - 服務(wù)端應(yīng)用程序主模塊
- tsconfig.server.json - TypeScript 服務(wù)端配置文件
- server.ts - Express web server 的運(yùn)行文件
修改的文件：
- package.json - 添加 SSR 所需要的依賴(lài)和運(yùn)行腳本
- angular.json - 添加開(kāi)發(fā)、構(gòu)建 SSR 應(yīng)用所需要的配置

替換瀏覽器 API

由于 Universal 應(yīng)用不是在瀏覽器中執(zhí)行，因此一些瀏覽器的 API 或功能將不可用。例如，服務(wù)端應(yīng)用是無(wú)法使用瀏覽器中的全局對(duì)象 window、document，navigator，location。

Angular 提供了兩個(gè)可注入對(duì)象，用于在服務(wù)端替換對(duì)等的對(duì)象：Location 和 DOCUMENT。

例如，在瀏覽器中，我們通過(guò) window.location.href 獲取當(dāng)前瀏覽器的地址，而改成 SSR 之后，代碼如下：

import { Location } from '@angular/common';

export class AbmNavbarComponent implements OnInit{
  // ctor 中注入 Location
  constructor(private _location:Location){
    //...
  }

  ngOnInit() {
    // 打印當(dāng)前地址
    console.log(this._location.path(true));
  }
}

同樣，對(duì)于在瀏覽器使用 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 絕對(duì)地址

在 Angular SSR 應(yīng)用中，HTTP 請(qǐng)求的 URL 地址必須為絕對(duì)地址（即，以 http/https 開(kāi)頭的地址，不能是相對(duì)地址，如 /api/heros）。Angular 官方推薦將請(qǐng)求的 URL 全路徑設(shè)置到 renderModule() 或 renderModuleFactory() 的 options 參數(shù)中。但是在 v14 自動(dòng)生成的代碼中，并沒(méi)有顯式調(diào)用這兩個(gè)方法的代碼。而通過(guò)讀 Http 請(qǐng)求的攔截，也可以達(dá)到同樣的效果。

下面我們先準(zhǔn)備一個(gè)攔截器，假設(shè)文件位于項(xiàng)目的 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';

// 忽略大小寫(xiě)檢查
const startsWithAny = (arr: string[] = []) => (value = '') => {
    return arr.some(test => value.toLowerCase().startsWith(test.toLowerCase()));
};

// http, https, 相對(duì)協(xié)議地址
const isAbsoluteURL = startsWithAny(['http', '//']);

@Injectable()
export class UniversalRelativeInterceptor implements HttpInterceptor {
    constructor(@Optional() @Inject(REQUEST) protected request: Request) { }

    intercept(req: HttpRequest<any>, next: HttpHandler) {
        // 不是絕對(duì)地址的 URL
        if (!isAbsoluteURL(req.url)) {
            let protocolHost: string;
            if (this.request) {
                // 如果注入的 REQUEST 不為空，則從注入的 SSR REQUEST 中獲取協(xié)議和地址
                protocolHost = `${this.request.protocol}://${this.request.get(
                    'host'
                )}`;
            } else {
                // 如果注入的 REQUEST 為空，比如在進(jìn)行 prerender build：
                // 這里需要添加自定義的地址前綴，比如我們的請(qǐng)求都是從 abmcode.com 來(lái)。
                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);
        }
    }
}
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';

// 忽略大小寫(xiě)檢查
const startsWithAny = (arr: string[] = []) => (value = '') => {
    return arr.some(test => value.toLowerCase().startsWith(test.toLowerCase()));
};

// http, https, 相對(duì)協(xié)議地址
const isAbsoluteURL = startsWithAny(['http', '//']);

@Injectable()
export class UniversalRelativeInterceptor implements HttpInterceptor {
    constructor(@Optional() @Inject(REQUEST) protected request: Request) { }

    intercept(req: HttpRequest<any>, next: HttpHandler) {
        // 不是絕對(duì)地址的 URL
        if (!isAbsoluteURL(req.url)) {
            let protocolHost: string;
            if (this.request) {
                // 如果注入的 REQUEST 不為空，則從注入的 SSR REQUEST 中獲取協(xié)議和地址
                protocolHost = `${this.request.protocol}://${this.request.get(
                    'host'
                )}`;
            } else {
                // 如果注入的 REQUEST 為空，比如在進(jìn)行 prerender build：
                // 這里需要添加自定義的地址前綴，比如我們的請(qǐng)求都是從 abmcode.com 來(lái)。
                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 出來(lái)：

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

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

這樣任何對(duì)于相對(duì)地址的請(qǐng)求都會(huì)自動(dòng)轉(zhuǎn)換為絕對(duì)地址請(qǐng)求，在 SSR 的場(chǎng)景下不會(huì)再出問(wèn)題。

Prerender 預(yù)渲染靜態(tài) HTML

經(jīng)過(guò)上面的步驟后，如果我們通過(guò) npm run build:ssr 構(gòu)建項(xiàng)目，你會(huì)發(fā)現(xiàn)在 dist/<your project>/browser 下面只有 index.html 文件，打開(kāi)文件查看，發(fā)現(xiàn)其中還有 <app-root></app-root> 這樣的元素，也就是說(shuō)你的網(wǎng)頁(yè)內(nèi)容并沒(méi)有在 html 中生成。這是因?yàn)?Angular 使用了動(dòng)態(tài)路由，比如 /product/:id 這種路由，而頁(yè)面的渲染結(jié)果要經(jīng)過(guò) JS 的執(zhí)行才能知道，因此，Angular 使用了 Express 作為 Web 服務(wù)器，能在服務(wù)端運(yùn)行時(shí)根據(jù)用戶(hù)請(qǐng)求（爬蟲(chóng)請(qǐng)求）使用模板引擎生成靜態(tài) HTML 界面。

而 prerender（npm run prerender）會(huì)在構(gòu)建時(shí)生成靜態(tài) HTML 文件。比如我們做企業(yè)官網(wǎng)，只有幾個(gè)頁(yè)面，那么我們可以使用預(yù)渲染技術(shù)生成這幾個(gè)頁(yè)面的靜態(tài) HTML 文件，避免在運(yùn)行時(shí)動(dòng)態(tài)生成，從而進(jìn)一步提升網(wǎng)頁(yè)的訪(fǎng)問(wèn)速度和用戶(hù)體驗(yàn)。

預(yù)渲染路徑配置

需要進(jìn)行預(yù)渲染（預(yù)編譯 HTML）的網(wǎng)頁(yè)路徑，可以有幾種方式進(jìn)行提供：

1.通過(guò)命令行的附加參數(shù):

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

2.如果路徑比較多，比如針對(duì) product/:id 這種動(dòng)態(tài)路徑，則可以使用一個(gè)路徑文件：

routes.txt

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

然后在命令行參數(shù)指定該文件：

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

3.在項(xiàng)目的 angular.json 文件配置需要的路徑：

 "prerender": {
   "builder": "@nguniversal/builders:prerender",
   "options": {
     "routes": [ // 這里配置
       "/",
       "/main/home",
       "/main/service",
       "/main/team",
       "/main/contact"
     ]
   },

配置完成后，重新執(zhí)行預(yù)渲染命令（npm run prerender 或者使用命令行參數(shù)則按照上面<1><2>中的命令執(zhí)行），編譯完成后，再打開(kāi) dist/<your project>/browser 下的 index.html 會(huì)發(fā)現(xiàn)里面沒(méi)有 <app-root></app-root> 了，取而代之的是主頁(yè)的實(shí)際內(nèi)容。同時(shí)也生成了相應(yīng)的路徑目錄以及各個(gè)目錄下的 index.html 子頁(yè)面文件。

SEO 優(yōu)化

SEO 的關(guān)鍵在于對(duì)網(wǎng)頁(yè) title，keywords 和 description 的收錄，因此對(duì)于我們想要讓搜索引擎收錄的網(wǎng)頁(yè)，可以修改代碼提供這些內(nèi)容。

在 Angular 14 中，如果路由界面通過(guò) Routes 配置，可以將網(wǎng)頁(yè)的靜態(tài) title 直接寫(xiě)在路由的配置中：

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

另外，Angular 也提供了可注入的 Title 和 Meta 用于修改網(wǎng)頁(yè)的標(biāo)題和 meta 信息：

import { Meta, Title } from '@angular/platform-browser';

export class AbmHomeComponent implements OnInit {

  constructor(
    private _title: Title,
    private _meta: Meta,
  ) { }

  ngOnInit() {
    this._title.setTitle('<此頁(yè)的標(biāo)題>');
    this._meta.addTags([
      { name: 'keywords', content: '<此頁(yè)的 keywords，以英文逗號(hào)隔開(kāi)>' },
      { name: 'description', content: '<此頁(yè)的描述>' }
    ]);
  }
}

總結(jié)

Angular 作為 SPA 企業(yè)級(jí)開(kāi)發(fā)框架，在模塊化、團(tuán)隊(duì)合作開(kāi)發(fā)方面有自己獨(dú)到的優(yōu)勢(shì)。在進(jìn)化到 v14 這個(gè)版本中提供了不依賴(lài) NgModule 的獨(dú)立 Component 功能，進(jìn)一步簡(jiǎn)化了模塊化的架構(gòu)。

Angular Universal 主要關(guān)注將 Angular App 如何進(jìn)行服務(wù)端渲染和生成靜態(tài) HTML，對(duì)于用戶(hù)交互復(fù)雜的 SPA 并不推薦使用 SSR。針對(duì)頁(yè)面數(shù)量較少、又有 SEO 需求的網(wǎng)站或系統(tǒng)，則可以考慮使用 Universal 和 SSR 技術(shù)。

您可能感興趣的文章: