溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Angular中的SSR怎么使用”，在日常操作中，相信很多人在Angular中的SSR怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Angular中的SSR怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
雖然現在包括 Google 在內的某些搜索引擎和社交媒體聲稱已經能支持對由 JavaScript（JS）驅動的 SPA（Single-Page Application）應用進行爬取，但是結果似乎差強人意。靜態 HTML 網站的 SEO 表現還是要好于動態網站，這也是 Angular 官網所持有的觀點（Angular 可是 Google 的！）。
Universal 可以生成無 JS 的靜態版本的應用程序，對搜索、外鏈、導航的支持更好。
某些移動端設備可能不支持 JS 或者對 JS 的支持非常有限，導致網站的訪問體驗非常差。這種情況下，我們需要提供無 JS 版本的應用，以便為用戶提供更好的體驗。
對于用戶的使用體驗來說，首頁展示速度的快慢至關重要。根據 eBay 的數據，搜索結果的展示速度每提高 100 毫秒，“添加至購物車”的使用率就提高 0.5%。
使用了 Universal 之后，應用程序的首頁會以完整的形態展示給用戶，這是純的 HTML 網頁，即使不支持 JS，也可以展示。此時，網頁雖然不能處理瀏覽器的事件，但是支持通過 routerLink 進行跳轉。
這么做的好處是，我們可以先用靜態網頁抓住用戶的注意力，在用戶瀏覽網頁的時候，同時加載整個 Angular 應用。這給了用戶一個非常好的極速加載的體驗。
Angular CLI 可以幫助我們非常便捷的將一個普通的 Angular 項目轉變為一個帶有 SSR 的項目。創建服務端應用只需要一個命令：
ng add @nguniversal/express-engine
建議在運行該命令之前先提交所有的改動。
這個命令會對項目做如下修改：
添加服務端文件：
main.server.ts - 服務端主程序文件
app/app.server.module.ts - 服務端應用程序主模塊
tsconfig.server.json - TypeScript 服務端配置文件
server.ts - Express 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 文件。
由于 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');
}
}
在 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 的場景下不會再出問題。
經過上面的步驟后，如果我們通過 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 的關鍵在于對網頁 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中的SSR怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
