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

I have mainly used angular universal for SEO purposes. In that, the server will render enough information on the page so that when Google crawls the page, you can have the server load some asynchronous data (eg. a description of a product from a databse) before serving the page so the crawler sees the information.

使用服務(wù)器端渲染，可以提前讓服務(wù)器加載一些異步數(shù)據(jù)，比如從數(shù)據(jù)庫里讀取產(chǎn)品的描述信息，便于爬蟲讀取。

Asynchronously loaded html via javascript is often missed by crawlers.

網(wǎng)絡(luò)爬蟲一般不會通過執(zhí)行 JavaScript 的方式去異步加載 HTML.

so you need the server to run a bit of javascript before serving the page to the client sometimes.

因此通常情況下，我們需要服務(wù)器先執(zhí)行一些 JavaScript 片段，才能將生成的頁面返回給客戶端。

SSR can generate a static version of a page and serve it. That doesn’t mean it will be fully functional.

SSR 可以生成一個應(yīng)用的靜態(tài)版本，但并不意味著該版本完全可用。

Serve, as needed, a static version of the page with most of the DOM elements preloaded, instead of waiting for angular to bootstrap and do this asynchronously via Javascript.

應(yīng)用頁面的靜態(tài)版本，大多數(shù) DOM 元素都已經(jīng)提前加載。這種情況下，不需要等待 Angular 完成 bootstrap 后，再執(zhí)行 JavaScript 完成頁面異步加載的效果。

To support offline mode, it has to be combined with pwa techniques, such as caching from the serviceWorker, getting data from local/session storage/ indexedDB, etc.

為了支持離線模式，SSR 需要和 PWA 技術(shù)配合起來使用，比如基于 Service Worker 的緩存，從 local / session 存儲介質(zhì)里讀取數(shù)據(jù)，等等。

Universal web servers

A Universal web server responds to application page requests with static HTML rendered by the Universal template engine.

Universal web 服務(wù)器，使用 Universal 模板引擎，給應(yīng)用程序的頁面請求，回復(fù)一個靜態(tài)版本的渲染完畢的 HTML 頁面。

The server receives and responds to HTTP requests from clients (usually browsers), and serves static assets such as scripts, CSS, and images.

服務(wù)器接收到從客戶端(通常情況下都是瀏覽器)發(fā)起的 HTTP 請求，并且以靜態(tài)資源，比如 scripts，CSS 和圖片的方式來響應(yīng)。

It may respond to data requests, either directly or as a proxy to a separate data server.

它也能響應(yīng)數(shù)據(jù)請求，或者直接響應(yīng)，或者作為代理，將該數(shù)據(jù)請求轉(zhuǎn)發(fā)給另外的數(shù)據(jù)服務(wù)器。

The sample web server for this guide is based on the popular Express framework.

Any web server technology can serve a Universal app as long as it can call Universal’s renderModule() function. The principles and decision points discussed here apply to any web server technology.

任何 web 服務(wù)器都能夠架設(shè) Universal 應(yīng)用，只要其能夠調(diào)用 Universal 的 renderModule() 方法。

Universal applications use the Angular platform-server package (as opposed to platform-browser)

Universal 應(yīng)用使用 Angular platform-server 包

which provides server implementations of the DOM, XMLHttpRequest, and other low-level features that don’t rely on a browser.

這個包提供了服務(wù)器端的 DOM 實現(xiàn)，XMLHttpRequest，以及其他不依賴于瀏覽器的底層特性。

The server (Node.js Express in this guide’s example) passes client requests for application pages to the NgUniversal ngExpressEngine.

服務(wù)器(在這個學(xué)習(xí)筆記里，服務(wù)器由 nodejs Express 實現(xiàn)) 將客戶端對于應(yīng)用頁面的請求，轉(zhuǎn)發(fā)給 NgUniversal Express engine.

Under the hood, this calls Universal’s renderModule() function, while providing caching and other helpful utilities.

其底層實現(xiàn)原理是，調(diào)用 Universal renderModule 函數(shù)，提供緩存和其他功能。

The renderModule() function takes as inputs a template HTML page (usually index.html), an Angular module containing components, and a route that determines which components to display. The route comes from the client’s request to the server.

renderModule 的輸入：

• HTML 模板頁面，通常為 index.html
• 一個包含 Components 的 Angular module
• 一個 route，決定哪些 Component 應(yīng)該顯示

Each request results in the appropriate view for the requested route. The renderModule() function renders the view within the tag of the template, creating a finished HTML page for the client.

每個請求最終會導(dǎo)致其對應(yīng)的路由視圖被渲染在模板的 app 標(biāo)簽里。

Because a Universal app doesn’t execute in the browser, some of the browser APIs and capabilities may be missing on the server.

Universal 應(yīng)用并不會執(zhí)行在瀏覽器環(huán)境里，因此部分瀏覽器 API 和功能，很可能在服務(wù)器端不可用。

For example, server-side applications can’t reference browser-only global objects such as window, document, navigator, or location.

例如，服務(wù)器端應(yīng)用無法使用只有在瀏覽器端可用的 window，document，navigator，location 等全局對象。

Angular provides some injectable abstractions over these objects, such as Location or DOCUMENT; it may substitute adequately for these APIs.

針對這些對象，Angular 提供了可注入的抽象，比如 Location 或者 DOCUMENT.

If Angular doesn’t provide it, it’s possible to write new abstractions that delegate to the browser APIs while in the browser and to an alternative implementation while on the server (aka shimming).

當(dāng)然我們也能自行在應(yīng)用程序里編寫這些抽象邏輯，即所謂的 shimming.

Similarly, without mouse or keyboard events, a server-side app can’t rely on a user clicking a button to show a component.

相應(yīng)的，因為缺少鼠標(biāo)或者鍵盤事件，服務(wù)器端應(yīng)用無法基于用戶點擊按鈕的方式來觸發(fā) Component 的顯示。

The app must determine what to render based solely on the incoming client request. This is a good argument for making the app routable.

應(yīng)用必須能夠純粹基于客戶端發(fā)起的請求來判斷出什么內(nèi)容需要渲染。這是讓應(yīng)用支持路由的一個極佳的理由。

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine) server.engine('html', ngExpressEngine({bootstrap: AppServerModule, }));

The ngExpressEngine() function is a wrapper around Universal’s renderModule() function which turns a client’s requests into server-rendered HTML pages.

ngExpressEngine 函數(shù)是 Universal renderModule 函數(shù)的一個 wrapper,將客戶端請求轉(zhuǎn)換成服務(wù)器端渲染好的 HTML 頁面。

接收的輸入?yún)?shù)：

bootstrap: The root NgModule or NgModule factory to use for bootstraping the app when rendering on the server.

根 NgModule 或者 NgModule 工廠，用于 bootstrap 在服務(wù)器端渲染的應(yīng)用。

For the example app, it is AppServerModule.

It’s the bridge between the Universal server-side renderer and the Angular application.

AppServerModule 是 Universal 服務(wù)器端渲染器和 Angular 應(yīng)用之間的橋梁。

SSR 需要對下列三種不同類型的請求分別進(jìn)行處理：

• Data request: request URL that begins /api. 數(shù)據(jù)請求，url 里常包含諸如 api 類型的片段。
• App navigation: request URL with no file extension.路由請求，不包含文件擴(kuò)展名。
• Static asset: all other requests.靜態(tài)資源請求。

A Node.js Express server is a pipeline of middleware that filters and processes requests one after the other.

nodejs Express 服務(wù)器實際是一種中間件傳播途徑，以一個接一個的方式，過濾和處理請求。

下列的代碼，將所有不包含 file extension 的請求，都當(dāng)作是導(dǎo)航請求進(jìn)行處理：

server.get('*', (req, res) => {res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] }); });

To ensure that clients can only download the files that they are permitted to see, put all client-facing asset files in the /dist folder and only honor requests for files from the /dist folder.

一個最佳實踐是，為了確保客戶端只能下載其權(quán)限允許范圍內(nèi)的文件，將所有該類型的文件都放到 /dist 文件夾里。

// Serve static files from /browser server.get('*.*', express.static(distFolder, {maxAge: '1y' }));

In a server-side rendered app, HTTP URLs must be absolute (for example, https://my-server.com/api/heroes).

服務(wù)器端渲染，HTTP URL 必須是絕對路徑。

This means that the URLs must be somehow converted to absolute when running on the server and be left relative when running in the browser.

這意味著，當(dāng)運行在服務(wù)器端時，url 必須被轉(zhuǎn)換成絕對路徑，而運行在瀏覽器端時，可以仍然保留成相對路徑。

If you are using one of the @nguniversal/*-engine packages (such as @nguniversal/express-engine), this is taken care for you automatically. You don’t need to do anything to make relative URLs work on the server.

@nguniversal/express-engine 會幫助我們自動完成絕對路徑轉(zhuǎn)相對路徑的操作。

2021年6月3日補充

服務(wù)器端渲染，main.js 并不包含完整的 SAP Spartacus Storefront 代碼，而是像瀏覽器一樣的渲染 Storefront 代碼，并且將結(jié)果返回。

main.js is basically all browser angular javascript code wrapped into rendering layer.

所有瀏覽器端的 JavaScript 代碼，包裹到渲染層中。

what you get by using curl is basically the result of running main.js

curl 的結(jié)果，就是用 node 運行 main.js 之后的輸出結(jié)果。

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

總結(jié)

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

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