官網鏈接：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 的方式渲染頁面。

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

該指令會創建下列的文件結構：

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

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

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

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

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

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

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

進行了很多編譯動作：

整個 dist 文件夾和其子文件夾都是 npm run dev:ssr 后自動生成的：

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

Navigation via routerLinks works correctly because they use the native anchor () tags.

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

使用 SSR 的三大原因

Facilitate web crawlers through search engine optimization (SEO)

為了配合網絡爬蟲，實現搜索引擎優化。

Improve performance on mobile and low-powered devices

改善應用在移動端和低配設備上訪問的性能。

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.

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

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Angular 服务器端渲染的学习笔记(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。