前言
早期的網站，幾乎所有都使用 ASP、Java、PHP 這類做后端渲染，但后來隨着 jQuery、Angular、React、Vue 等 JS 框架的崛起，開始轉向了前端渲染。從 2014 年起又開始流行了同構渲染，號稱是未來，集成了前后端渲染的優點，但多年過去，很多當時壯心滿滿的框架（rendr、Lazo）從先驅變成了先烈。同構到底是不是未來？自己的項目該如何選型？我想不應該只停留在追求熱門和拘泥於固定模式上，忽略了前后端渲染之“爭”的“核心點”，關注如何提升“用戶體驗”。
后端渲染（服務器端渲染）
早期的網站開發整個HTML頁面是由服務器來渲染的，服務器直接生產渲染好對應的HTML頁面，返回給客戶端進行展示。
后端渲染過程（如下圖）：
- 一個頁面有自己對應的網址，也就是URL
- URL會發送到服務器，服務器會通過正則對該URL進行匹配，並且最后交給一個Controller處理
- Controller進行各種處理，最終生成HTML或者數據，返回給前端
- 這就完成了一個IO操作
后端渲染的優勢：
- 服務端渲染不需要先下載一堆 js 和 css 后才能看到頁面（首屏性能）
- 利於SEO
后端渲染的缺點：
- 整個頁面的模塊由后端人員來編寫和維護
- HTML代碼和數據以及對應的邏輯會混在一起，編寫和維護都是非常糟糕的
前端渲染
前端渲染的方式起源於JavaScript的興起，ajax的大熱更是讓前端渲染更加成熟，前端渲染真正意義上的實現了前后端分離，前端只專注於UI的開發，后端只專注於邏輯的開發，前后端交互只通過約定好的API來交互，后端提供json數據，前端通過ajax獲取數據，並通過js把數據渲染到頁面上去。
前端渲染優勢：
- 前后端責任清晰，后端專注於數據上，前端專注於交互和可視化上
- 局部刷新。無需每次都進行完整頁面請求
- 網絡傳輸數據量小
前端渲染缺點：
- 前端耗時較多，不利於SEO
SPA（單頁面富應用）階段
其實SPA最主要的特點就是在前后端分離的基礎上加了一層前端路由，也就是前端來維護一套路由規則。（例如vue里組件對應一個路由）
改變URL不會去服務器請求新的資源，因為改變的是前端路由。當然如果刷新的話還是會向服務器發送請求。
參考資料：https://www.bilibili.com/video/BV15741177Eh?p=101
https://github.com/camsong/blog/issues/8