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 應用執行在伺服器端。

使用方式：

```typescript
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:

![](https://img-blog.csdnimg.cn/img_convert/058f965d2184185f7faf5d9f69d7d582.png)

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

![](https://img-blog.csdnimg.cn/img_convert/4b48741cc030a65abca953f1dc786f36.png)

並且這個 console.log, 因為程式碼是執行在伺服器端的，所以只有在啟動 nodejs 應用的控制檯裡才能看到 log：

![](https://img-blog.csdnimg.cn/img_convert/b3a3b254eb640ef8cab8e8b60d4c014b.png)

至於客戶端瀏覽器裡看到的這些 JavaScript：

![](https://img-blog.csdnimg.cn/img_convert/2ffaeeac8bc750e539473bd7c3034e4a.png)

來自 dist/browser 資料夾：

![](https://img-blog.csdnimg.cn/img_convert/657404fd1c55c6ea932899cd2e6438c0.png)

另一篇文章：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.

![](https://img-blog.csdnimg.cn/img_convert/dc1c3016526476b0f258373afd449f78.png)

> 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.

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

再看客戶端渲染：

![](https://img-blog.csdnimg.cn/img_convert/67d5bc3eddf2955bec6348df0576a801.png)

> 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.

三個最重要的依賴：

![](https://img-blog.csdnimg.cn/img_convert/ddf820467f8d45cf9ba060f2d01f9934.png)

* @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.

客戶端指令碼只負責響應使用者動作，不再負責資料讀取。

Angular Universal 學習筆記 - 客戶端渲染和伺服器端渲染的區別

相關文章