https://github.com/angular/universal

Universal 的命名由來：

We believe that using the word “universal” is correct when referring to a JavaScript Application that runs in more environments than the browser. (inspired by Universal JavaScript)

參考了一個能運行在除瀏覽器之外的其他環境下的 JavaScript 應用。

Angular Express Engine

This is an Express Engine for running Angular Apps on the server for server side rendering.

能夠讓 Angular 應用運行在服務器端。

使用方式：

import * as express from 'express'; import { ngExpressEngine } from '@nguniversal/express-engine';const app = express();// Set the engine app.engine('html',ngExpressEngine({bootstrap: ServerAppModule, // Give it a module to bootstrap}), );app.set('view engine', 'html');app.get('/**/*', (req: Request, res: Response) => {res.render('../dist/index', {req,res,}); });

注意：我在 server.ts 里做了修改，加上了 console.log:

需要執行 npm run build:ssr 之后，server.ts 的修改，才會出現在 dist/server/main.js 里去：

并且這個 console.log, 因為代碼是執行在服務器端的，所以只有在啟動 nodejs 應用的控制臺里才能看到 log：

至于客戶端瀏覽器里看到的這些 JavaScript：

來自 dist/browser 文件夾：

另一篇文章：https://dzone.com/articles/angular-server-side-rendering-ssr-made-easy-with-a

什么是服務器端渲染

The server returns a static web page fully complied with dynamic data ready to display on the browser.

The fetching of the dynamic data is done by server-side scripts written by server-side languages.

動態數據的獲取是運行服務器端腳本而完成的。注意上圖：在服務器端渲染模式下，服務器返回給客戶端的頁面，包含了頁面布局和所有的數據，即數據的 Viewable. 而加上 Client-side scripts 的輔助后，頁面從純粹的 layout，變成了 Viewable 和 intractable.

This is how we used to render web pages in the old days (PHP/ Perl/CGI), and it has recently gained traction with technologies, such as React and Express. It is SEO friendly and great for devices with low power.

實際上，PHP, JSP 就是采用這種方式渲染網頁的。

The server returns a complete static web page with all the elements required to display the browser and the client-side scripts required to make the page dynamic.

服務器返回的是：一個完全靜態的網頁，包含了所有顯示在瀏覽器里所必需的元素，以及客戶端層面的腳本。這些腳本可以用來讓頁面具有動態效果。

再看客戶端渲染：

The server returns a partial web page with no dynamic data, but it provides the client-side scripts necessary to fetch the data on demand asynchronously.

服務器返回給客戶端的是一個空的模板，不包含任何數據。通過客戶端腳本，在客戶端執行，異步獲取數據。

The client is responsible for fetching the data upon loading a new page or based on user interaction. There are many Async calls to the server. CSR is not SEO friendly, as the content is always dynamic.

客戶端負責在加載新頁面或者基于用戶響應時去異步加載數據。因為內容是完全動態的，對 SEO 不友好。

using the new Angular Schematic, we are going to configure the application as server-side rendering (SSR).

使用 Angular Schematic，可以將 Angular 應用配置成支持 SSR.

三個最重要的依賴：

• @angular/platform-server
• @nguniversal/express-engine
• express

The server has delivered a completely static HTML page with all elements in pure SSR.

在 SSR 模式下，服務器返回了純靜態的 HTML 頁面，包含了所有的 DOM element.

The client-side script is only needed for user interaction and is not responsible for fetching the data.

客戶端腳本只負責響應用戶動作，不再負責數據讀取。

一個服務器端渲染成功的標志：

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

總結

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

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