各種渲染方式對比解析

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 等模板引擎進行本地調試，而后端的調試則需要到測試機了