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)

參考了一個能運行在除瀏覽器之外的其他環(huán)境下的 JavaScript 應(yīng)用。

Angular Express Engine

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

能夠讓 Angular 應(yīng)用運行在服務(wù)器端。

使用方式：

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:

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

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

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

來自 dist/browser 文件夾：

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

什么是服務(wù)器端渲染

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.

動態(tài)數(shù)據(jù)的獲取是運行服務(wù)器端腳本而完成的。注意上圖：在服務(wù)器端渲染模式下，服務(wù)器返回給客戶端的頁面，包含了頁面布局和所有的數(shù)據(jù)，即數(shù)據(jù)的 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 就是采用這種方式渲染網(wǎng)頁的。

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.

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

再看客戶端渲染：

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.

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

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.

客戶端負責在加載新頁面或者基于用戶響應(yīng)時去異步加載數(shù)據(jù)。因為內(nèi)容是完全動態(tài)的，對 SEO 不友好。

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

使用 Angular Schematic，可以將 Angular 應(yīng)用配置成支持 SSR.

三個最重要的依賴：

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

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

在 SSR 模式下，服務(wù)器返回了純靜態(tài)的 HTML 頁面，包含了所有的 DOM element.

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

客戶端腳本只負責響應(yīng)用戶動作，不再負責數(shù)據(jù)讀取。

一個服務(wù)器端渲染成功的標志：

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

總結(jié)

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

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