官網(wǎng)鏈接：https://angular.io/guide/universal

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

Angular Universal 是一種將 Angular 應(yīng)用渲染于服務(wù)器平臺上的技術(shù)。

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

普通的 Angular 應(yīng)用在瀏覽器里執(zhí)行，響應(yīng)用戶動作，并以 DOM 的方式渲染頁面。

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

Angular Universal 執(zhí)行在服務(wù)器端，生成靜態(tài)的應(yīng)用頁面，該頁面隨后在客戶端進行引導(dǎo)(bootstrap).

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

服務(wù)器端渲染通常意味著應(yīng)用程序的渲染速度更加快捷，允許用戶在應(yīng)用能夠?qū)崿F(xiàn)正常互動之前，就有機會一窺應(yīng)用的布局。

google 有一篇專門講 SSR 技術(shù)的文章：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，可以完成一個應(yīng)用支持 SSR 所需的準備工作，具體步驟通過 CLI Schematic 的 @nguniversal/express-engine 完成。

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

為了創(chuàng)建面向服務(wù)器端渲染的 app module, 即 app.server.module.ts， 執(zhí)行下列 CLI 指令：

ng add @nguniversal/express-engine

該指令會創(chuàng)建下列的文件結(jié)構(gòu)：

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

本地使用 Universal 方式渲染應(yīng)用的命令：npm run dev:ssr

執(zhí)行的是 package.json scripts 區(qū)塊里定義的該命令：

如果遇到錯誤消息：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 服務(wù)器，基于 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 的跳轉(zhuǎn)可以正常工作，因為其使用原生的 a 標簽。

使用 SSR 的三大原因

Facilitate web crawlers through search engine optimization (SEO)

為了配合網(wǎng)絡(luò)爬蟲，實現(xiàn)搜索引擎優(yōu)化。

Improve performance on mobile and low-powered devices

改善應(yīng)用在移動端和低配設(shè)備上訪問的性能。

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

能夠以 FCP 的方式，快速顯示應(yīng)用首頁。

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 和其他社交媒體網(wǎng)站，都使用網(wǎng)絡(luò)爬蟲，為應(yīng)用內(nèi)容建立索引，以便讓其內(nèi)容能夠在網(wǎng)絡(luò)上被搜索到。

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

如果一個 Angular 應(yīng)用具備高度的可交互性，那么網(wǎng)絡(luò)爬蟲可能很難像一個人類用戶一樣，采用導(dǎo)航的方式訪問應(yīng)用，并索引其內(nèi)容。

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

Angular Universal 可以基于 Angular 應(yīng)用，生成一個靜態(tài)版本，易于被搜索，鏈接，以及不借助 JavaScript 進行導(dǎo)航。

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

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

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

有些設(shè)備不支持 JavaScript，或者支持程度很差，因此應(yīng)用用戶體驗很難接受。

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

在這種情況下，我們需要一個服務(wù)器端渲染，不需要 JavaScript 也能運行的應(yīng)用。

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

這種版本的應(yīng)用，雖然功能局限，但是總比完全不能用的版本好。

Show the first page quickly

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

為了確保用戶體驗，迅速顯示應(yīng)用首屏頁面的能力至關(guān)重要。

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，可以生成應(yīng)用的初始頁面，該頁面和完整的應(yīng)用相比外觀上無區(qū)別，并且是純粹的 HTML 代碼，即使在 JavaScript 禁掉的瀏覽器上，也能正常顯示。

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

該頁面不支持瀏覽器事件，但支持基于 routerLink 的 site 間導(dǎo)航。

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

從操作層面說，我們可以提供應(yīng)用初始頁面的靜態(tài)版本，以吸引用戶的注意。

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。