官網連結：https://angular.io/guide/universal

Angular Universal, a technology that renders Angular applications on the server.

Angular Universal 是一種將 Angular 應用渲染於伺服器平臺上的技術。

> A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions.

普通的 Angular 應用在瀏覽器裡執行，響應使用者動作，並以 DOM 的方式渲染頁面。

![](https://img-blog.csdnimg.cn/img_convert/c10e2e73a5bfda7565f9335b31c67d7c.png)

> Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client.

Angular Universal 執行在伺服器端，生成靜態的應用頁面，該頁面隨後在客戶端進行引導(bootstrap).

> This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.

伺服器端渲染通常意味著應用程式的渲染速度更加快捷，允許使用者在應用能夠實現正常互動之前，就有機會一窺應用的佈局。

google 有一篇專門講 SSR 技術的文章：https://developers.google.com/web/updates/2019/02/rendering-on-the-web

> You can easily prepare an app for server-side rendering using the Angular CLI. The CLI schematic @nguniversal/express-engine performs the required steps.

使用 Angular CLI，可以完成一個應用支援 SSR 所需的準備工作，具體步驟透過 CLI Schematic 的 @nguniversal/express-engine 完成。

> To create the server-side app module, app.server.module.ts, run the following CLI command.

為了建立面向伺服器端渲染的 app module, 即 app.server.module.ts， 執行下列 CLI 指令：

> ng add @nguniversal/express-engine

該指令會建立下列的檔案結構：

![](https://img-blog.csdnimg.cn/img_convert/223f29ba39f93aeac15c935d0b25199e.png)

![](https://img-blog.csdnimg.cn/img_convert/914f2012fa95ce678272cb72c9f3541f.png)

![](https://img-blog.csdnimg.cn/img_convert/bd43c6a1e9d300a4025e0684dd355481.png)

![](https://img-blog.csdnimg.cn/img_convert/982b6b90781d4ec8ecad4da9f7267416.png)

> To start rendering your app with Universal on your local system, use the following command.

本地使用 Universal 方式渲染應用的命令：npm run dev:ssr

![](https://img-blog.csdnimg.cn/img_convert/ad5711a169afada3c8cb802c69abac68.png)

執行的是 package.json scripts 區塊裡定義的該命令：

![](https://img-blog.csdnimg.cn/img_convert/e8d7751f16c0919c934c793991a947ee.png)

如果遇到錯誤訊息：An unhandled exception occurred: Cannot find module '@nguniversal/builders/package.json'
Require stack:

![](https://img-blog.csdnimg.cn/img_convert/8f8dc31275c9e738e8e6ce0998cba95c.png)

先 npm install. 之後原始的錯誤消失。

![](https://img-blog.csdnimg.cn/img_convert/ad5dc64a4796c8a6b3f96a0db0d33439.png)

> A Node.js Express web server compiles HTML pages with Universal based on client requests.

一個 node.js express web 伺服器，基於 Universal 編譯 HTML 頁面。

進行了很多編譯動作：
![](https://img-blog.csdnimg.cn/img_convert/0222192a1a7282bba53d577d19809323.png)

整個 dist 資料夾和其子資料夾都是 npm run dev:ssr 後自動生成的：

![](https://img-blog.csdnimg.cn/img_convert/904ebd4fc52160321ec848280fa1d883.png)

開啟 http://localhost:4200/dashboard，看到了熟悉的 hero dashboard:

![](https://img-blog.csdnimg.cn/img_convert/28b350703917779eb4ed2968c770b1c1.png)

> Navigation via routerLinks works correctly because they use the native anchor (<a rel="nofollow">) tags.

基於 routerLinks 的跳轉可以正常工作，因為其使用原生的 a 標籤。

# 使用 SSR 的三大原因

1. Facilitate web crawlers through search engine optimization (SEO)

為了配合網路爬蟲，實現搜尋引擎最佳化。

2. Improve performance on mobile and low-powered devices

改善應用在移動端和低配裝置上訪問的效能。

3. Show the first page quickly with a first-contentful paint (FCP)

能夠以 FCP 的方式，快速顯示應用首頁。

> Google, Bing, Facebook, Twitter, and other social media sites rely on web crawlers to index your application content and make that content searchable on the web.

谷歌，Bing，Facebook 和其他社交媒體網站，都使用網路爬蟲，為應用內容建立索引，以便讓其內容能夠在網路上被搜尋到。

> These web crawlers may be unable to navigate and index your highly interactive Angular application as a human user could do.

如果一個 Angular 應用具備高度的可互動性，那麼網路爬蟲可能很難像一個人類使用者一樣，採用導航的方式訪問應用，並索引其內容。

> Angular Universal can generate a static version of your app that is easily searchable, linkable, and navigable without JavaScript.

Angular Universal 可以基於 Angular 應用，生成一個靜態版本，易於被搜尋，連結，以及不借助 JavaScript 進行導航。

> Angular Universal Universal also makes a site preview available since each URL returns a fully rendered page.

同時也能讓 site 預覽成為可能，因為每個 url 返回的是完全渲染過後的頁面。

> Some devices don't support JavaScript or execute JavaScript so poorly that the user experience is unacceptable.

有些裝置不支援 JavaScript，或者支援程度很差，因此應用使用者體驗很難接受。

> For these cases, you may require a server-rendered, no-JavaScript version of the app.

在這種情況下，我們需要一個伺服器端渲染，不需要 JavaScript 也能執行的應用。

> This version, however limited, may be the only practical alternative for people who otherwise couldn't use the app at all.

這種版本的應用，雖然功能侷限，但是總比完全不能用的版本好。

# Show the first page quickly

> Displaying the first page quickly can be critical for user engagement.

為了確保使用者體驗，迅速顯示應用首屏頁面的能力至關重要。

> Your app may have to launch faster to engage these users before they decide to do something else.

> With Angular Universal, you can generate landing pages for the app that look like the complete app. The pages are pure HTML, and can display even if JavaScript is disabled.

使用 Angular Universal，可以生成應用的初始頁面，該頁面和完整的應用相比外觀上無區別，並且是純粹的 HTML 程式碼，即使在 JavaScript 禁掉的瀏覽器上，也能正常顯示。

> The pages don't handle browser events, but they do support navigation through the site using routerLink.

該頁面不支援瀏覽器事件，但支援基於 routerLink 的 site 間導航。

> In practice, you'll serve a static version of the landing page to hold the user's attention.

從操作層面說，我們可以提供應用初始頁面的靜態版本，以吸引使用者的注意。</a>

Angular 伺服器端渲染的學習筆記(一)

相關文章