細說後端模板渲染、客戶端渲染、node 中間層、伺服器端渲染（ssr）
前端與後端渲染方式的發展大致經歷了這樣幾個階段：後端模板渲染、客戶端渲染、node 中間層、伺服器端渲染（ssr）。
1. 後端模板渲染
前端與後端最初的渲染方式是後端模板渲染，就是由後端使用模板引擎渲染好 html 後，返回給前端，前端再用 js 去操作 dom 或者渲染其他動態的部分。
這個過程大致分成以下幾個步驟：
- 前端請求一個地址
url - 後端接收到這個請求，然後根據請求資訊，從資料庫或者其他地方獲取相應的資料
- 使用模板引擎（如
java > jsp、php > smarty）將這些資料渲染成html - 將
html文字返回給前端
在這個過程中，前端的 html 程式碼需要嵌入到後端程式碼中（如 java 、 php ），並且在很多情況下，前端原始碼和後端原始碼是在一個工程裡的。
所以，不難看出，這種方式的有這樣的幾個不足：
- 前後端雜揉在一起，不方便本地開發、本地模擬除錯，也不方便自動化測試
- 前端被約束在後端開發的模式中，不能充分使用前端的構建生態，開發效率低下
- 專案難以管理和維護，也可能會有前後端職責不清的問題
儘管如此，但因為這種方式是最早出現的方式，並且這種渲染方式有一個好處，就是前端能夠快速呈現伺服器端渲染好的頁面，而不用等客戶端渲染，這能夠提供很好的使用者體驗與 SEO 友好，所以當下很多比較早的網站或者需要快速響應的展示性網站仍然是使用這種方式。
2. 客戶端渲染
隨著前端工程化與前後端分離的發展，以及前端元件化技術的出現，如 ofollow,noindex" target="_blank">react 、 vue 等，客戶端渲染已經慢慢變成了主要的開發方式了。
與後端模板渲染剛好相反，客戶端渲染的頁面渲染都是在客戶端進行，後端不負責任何的渲染，只管資料互動。
這個過程大致分成以下幾個步驟：
- 前端請求一個地址
url - 後端接收到這個請求，然後把相應的
html檔案直接返回給前端 - 前端解析
js後，然後通過ajax向後臺獲取相應的資料 - 然後由
js將這些資料渲染成頁面
這樣一來，前端與後端將完全解耦，資料使用全 ajax 的方式進行互動，如此便可前後端分離了。
其實，不難看出，客戶端渲染與前後端分離有很大的好處：
- 前端獨立出來，可以充分使用前端生態的強大功能
- 更好的管理程式碼，更有效率的開發、除錯、測試
- 前後端程式碼解耦之後，能更好的擴充套件、重構
所以，客戶端渲染與前後端分離現在已經是主流的開發方式了。
但這種方式也有一些不足：
js html
3. node 中間層
為了解決客戶端渲染的不足，便出現了 node 中間層的理念。
傳統的 B/S 架構中，是 瀏覽器 -> 後端伺服器 -> 瀏覽器 ，上文所講的都是這種架構。
而加入了 node 中間層之後，就變成 瀏覽器 -> node -> 後端伺服器 -> node -> 瀏覽器 。
這個過程大致分成以下幾個步驟：
url html html
一個典型的 node 中間層應用就是後端提供資料、node 層渲染模板、前端動態渲染。
這個過程中，node 層由前端開發人員掌控，頁面中哪些頁面在伺服器上就渲染好，哪些頁面在客戶端渲染，由前端開發人員決定。
這樣做，達到了以下的目的：
- 保留後端模板渲染、首屏快速響應、SEO 友好
- 保留前端後分離、客戶端渲染的功能（首屏伺服器端渲染、其他客戶端渲染）
但這種方式也有一些不足：
- 增加了一箇中間層，應用效能有所降低
- 增加了架構的複雜度、不穩定性，降低應用的安全性
- 對開發人員要求高了很多
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. 另外
- 不需要首屏快速載入、SEO 友好的，用全客戶端渲染
- 需要首屏快速載入、SEO 友好的，如果用瞭如
react、vue等元件化技術，將不得不用 node 中間層與伺服器端渲染 - 如果技術團隊不支援，不建議在需要首屏快速載入、SEO 友好的地方使用如
react、vue等元件化技術 - 前後端分離之後也可以做後端模板渲染，這樣前端的除錯可以搭配 handlebars 、 ejs 等模板引擎進行本地除錯，而後端的除錯則需要到測試機了