何為渲染？如果我們只是想顯示一堆不變的數據，那么我們直接寫一個a.html丟到服務器上讓客戶端訪問就可以了。但這是基本不可能的事情，數據一般是變化的。你不可能為每套數據寫一個視圖，所以我們需要分離數據和視圖，然后使用一種技術將數據塞到視圖中，這種技術就叫渲染。這工作放在服務器上做就是服務器渲染，放在瀏覽器做就是瀏覽器渲染。

這里的渲染，就是指生成html文檔的過程，和瀏覽器渲染html沒有關系。

瀏覽器端渲染，指的是用js去生成html，前端做路由。舉例：React, Vue等等前端框架。適合單頁面應用程序。

服務器端渲染，指的是用后臺語言通過一些模版引擎生成html。舉例：PHP文件、JSP文件、Python的Flask配合Jinja引擎、Django框架、Java配合vm模版引擎、NodeJS配合Jade。適合多頁面應用。其實現在大部分網站還是這種形式。

所以有為了讓單頁面應用利于SEO，讓服務器和客戶端同構，也使用React/Vue渲染的方案。

PS: Segmentfault也是服務端渲染。

瀏覽器渲染

單頁應用用的基本都是瀏覽器渲染。優點很明確，后端只提供數據，前端做視圖和交互邏輯，分工明確。服務器只提供接口，路由以及渲染都丟給前端，服務器計算壓力變輕了。但是弱點就是用戶等待時間變長了，尤其在請求數多而且有一定先后順序的時候。

服務器渲染

服務器接到用戶請求之后，計算出用戶需要的數據，然后將數據更新成視圖（也就是一串dom字符）發給客戶端，客戶端直接將這串字符塞進頁面即可。這樣做的好處是響應很快，用戶體驗會比較好，另外對于搜索引擎來說也是友好的，有SEO優化。nodejs層的服務器渲染，還有一個明顯的好處就是前端性能優化更順手了，可操作的空間大了。但是缺點也很明顯，如果不是增加一個node層的話，前后端責任分工不明，不能很好的并行開發。另外也增加了服務器計算壓力（雖然可以做渲染緩存，但畢竟是多做了計算）。

客戶端渲染路線：

1. 請求一個html -> 2. 服務端返回一個html -> 3. 瀏覽器下載html里面的js/css文件 -> 4. 等待js文件下載完成 -> 5. 等待js加載并初始化完成 -> 6. js代碼終于可以運行，由js代碼向后端請求數據( ajax/fetch ) -> 7. 等待后端數據返回 -> 8. 客戶端從無到完整地，把數據渲染為響應頁面

服務端渲染路線：

1. 請求一個html -> 2. 服務端請求數據( 內網請求快 ) -> 3. 服務器初始渲染（服務端性能好，較快） -> 4. 服務端返回已經有正確內容的頁面 -> 5. 客戶端請求js/css文件 -> 6. 等待js文件下載完成 -> 7. 等待js加載并初始化完成 -> 8. 客戶端把剩下一部分渲染完成( 內容小，渲染快 )

對同一個組件，服務端渲染“可視的”一部分( render/componentWillMount部分代碼 )，為確保組件有完善的生命周期及事件處理，客戶端需要再次渲染。即：服務端渲染，實際上也是需要客戶端進行 再次地、但開銷很小的二次渲染。

根據以上特點，在用戶體驗要求比較高的頁面（首屏）、重復較多的公共頁面可以考慮使用服務器渲染，減少ajax請求和提升用戶體驗。

時間耗時比較：

數據請求：由服務端請求數據而不是客戶端請求數據，這是“快”的一個主要原因。服務端在內網進行請求，數據響應速度快。客戶端在不同網絡環境進行數據請求，且外網http請求開銷大，導致時間差（主要原因）。

步驟：服務端是先請求數據然后渲染“可視”部分，而客戶端是等待js代碼下載、加載完成再請求數據、渲染。即：服務端渲染不用等待js代碼下載完成再請求數據，并會返回一個已經有內容的頁面。

渲染性能：服務端性能比客戶端高，渲染速度快( 猜測，該項數據不詳 )。

渲染內容：服務端渲染會把”可視“部分先渲染，然后交給客戶端再作部分渲染。而客戶端渲染，則是從無到有，需要經歷完整的渲染步驟。