細說後端模板渲染、客戶端渲染、node 中間層、服務器端渲染（ssr）

細說後端模板渲染、客戶端渲染、node 中間層、服務器端渲染（ssr）

前端與後端渲染方式的發展大體經歷了這樣幾個階段：後端模板渲染、客戶端渲染、node 中間層、服務器端渲染（ssr）。

1. 後端模板渲染

前端與後端最初的渲染方式是後端模板渲染，就是由後端使用模板引擎渲染好 html 後，返回給前端，前端再用 js 去操做 dom 或者渲染其餘動態的部分。

這個過程大體分紅如下幾個步驟：

1. 前端請求一個地址 url
2. 後端接收到這個請求，而後根據請求信息，從數據庫或者其餘地方獲取相應的數據
3. 使用模板引擎（如 java > jsp、php > smarty）將這些數據渲染成 html
4. 將 html 文本返回給前端

在這個過程當中，前端的 html 代碼須要嵌入到後端代碼中（如 java、php），而且在不少狀況下，前端源代碼和後端源代碼是在一個工程裏的。

因此，不難看出，這種方式的有這樣的幾個不足：

1. 先後端雜揉在一塊兒，不方便本地開發、本地模擬調試，也不方便自動化測試
2. 前端被約束在後端開發的模式中，不能充分使用前端的構建生態，開發效率低下
3. 項目難以管理和維護，也可能會有先後端職責不清的問題

儘管如此，但由於這種方式是最先出現的方式，而且這種渲染方式有一個好處，就是前端可以快速呈現服務器端渲染好的頁面，而不用等客戶端渲染，這可以提供很好的用戶體驗與 SEO 友好，因此當下不少比較早的網站或者須要快速響應的展現性網站仍然是使用這種方式。

2. 客戶端渲染

隨着前端工程化與先後端分離的發展，以及前端組件化技術的出現，如 react、vue 等，客戶端渲染已經慢慢變成了主要的開發方式了。

與後端模板渲染恰好相反，客戶端渲染的頁面渲染都是在客戶端進行，後端不負責任何的渲染，只管數據交互。

這個過程大體分紅如下幾個步驟：

1. 前端請求一個地址 url
2. 後端接收到這個請求，而後把相應的 html 文件直接返回給前端
3. 前端解析 js 後，而後經過 ajax 向後臺獲取相應的數據
4. 而後由 js 將這些數據渲染成頁面

這樣一來，前端與後端將徹底解耦，數據使用全 ajax 的方式進行交互，如此即可先後端分離了。

其實，不難看出，客戶端渲染與先後端分離有很大的好處：

1. 前端獨立出來，能夠充分使用前端生態的強大功能
2. 更好的管理代碼，更有效率的開發、調試、測試
3. 先後端代碼解耦以後，能更好的擴展、重構

因此，客戶端渲染與先後端分離如今已是主流的開發方式了。

但這種方式也有一些不足：

1. 首屏加載緩慢，由於要等 js 加載完畢後，才能進行渲染
2. SEO 不友好，由於 html 中幾乎沒有可用的信息

3. node 中間層

爲了解決客戶端渲染的不足，便出現了 node 中間層的理念。

傳統的 B/S 架構中，是 瀏覽器 -> 後端服務器 -> 瀏覽器，上文所講的都是這種架構。

而加入了 node 中間層以後，就變成 瀏覽器 -> node -> 後端服務器 -> node -> 瀏覽器。

這個過程大體分紅如下幾個步驟：

1. 前端請求一個地址 url
2. node 層接收到這個請求，而後根據請求信息，向後端服務器發起請求，獲取數據
3. 後端服務器接收到請求，而後根據請求信息，從數據庫或者其餘地方獲取相應的數據，返回給 node 層
4. node 層根據這些數據渲染好首屏 html
5. node 層將 html 文本返回給前端

一個典型的 node 中間層應用就是後端提供數據、node 層渲染模板、前端動態渲染。

這個過程當中，node 層由前端開發人員掌控，頁面中哪些頁面在服務器上就渲染好，哪些頁面在客戶端渲染，由前端開發人員決定。

這樣作，達到了如下的目的：

1. 保留後端模板渲染、首屏快速響應、SEO 友好
2. 保留前端後分離、客戶端渲染的功能（首屏服務器端渲染、其餘客戶端渲染）

但這種方式也有一些不足：

1. 增長了一箇中間層，應用性能有所下降
2. 增長了架構的複雜度、不穩定性，下降應用的安全性
3. 對開發人員要求高了不少

4. 服務器端渲染（ssr）

大部分狀況下，服務器端渲染（ssr）與 node 中間層是同一個概念。

服務器端渲染（ssr）通常特指，在上文講到的 node 中間層基礎上，加上前端組件化技術在服務器上的渲染，特別是 react 和 vue。

react、vue、angular 等框架的出現，讓前端組件化技術深刻人心，但在一些須要首屏快速加載與 SEO 友好的頁面就陷入了兩難的境地了。

由於前端組件化技術天生就是給客戶端渲染用的，而在服務器端須要被渲染成 html 文本，這確實不是一件很容易的事，因此服務器端渲染（ssr）就是爲了解決這個問題。

好在社區一直在不斷的探索中，讓前端組件化可以在服務器端渲染，好比 next.js、nuxt.js、razzle、react-server、beidou 等。

通常這些框架都會有一些目錄結構、書寫方式、組件集成、項目構建的要求，自定義屬性可能不是很強。

以 next.js 爲例，整個應用中是沒有 html 文件的，全部的響應 html 都是 node 動態渲染的，包括裏面的元信息、css, js 路徑等。渲染過程當中，next.js 會根據路由，將首頁全部的組件渲染成 html，餘下的頁面保留原生組件的格式，在客戶端渲染。

5. 另外

1. 不須要首屏快速加載、SEO 友好的，用全客戶端渲染
2. 須要首屏快速加載、SEO 友好的，若是用瞭如 react、vue 等組件化技術，將不得不用 node 中間層與服務器端渲染
3. 若是技術團隊不支持，不建議在須要首屏快速加載、SEO 友好的地方使用如 react、vue 等組件化技術
4. 先後端分離以後也能夠作後端模板渲染，這樣前端的調試能夠搭配 handlebars、ejs 等模板引擎進行本地調試，然後端的調試則須要到測試機了

後續

更多博客，查看 https://github.com/senntyou/blogs

做者：深予之 (@senntyou)

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）