淺談服務器端渲染和客戶端渲染的區別和優缺點

https://segmentfault.com/q/1010000008563275/a-1020000008738562
https://www.freecodecamp.org/news/what-exactly-is-client-side-rendering-and-hows-it-different-from-server-side-rendering-bd5c786b340d/

何爲渲染？

若是咱們只是想顯示一堆不變的數據，那麼咱們直接寫一個a.html丟到服務器上讓客戶端訪問就能夠了。但這是基本不可能的事情，數據通常是變化的。你不可能爲每套數據寫一個視圖，因此咱們須要分離數據和視圖，而後使用一種技術將數據塞到視圖中，這種技術就叫渲染。這工做放在服務器上作就是服務器渲染，放在瀏覽器作就是瀏覽器渲染。

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

• 瀏覽器端渲染，

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

• 服務器端渲染，

  指的是用後臺語言經過一些模版引擎生成html。舉例：PHP文件、JSP文件、Python的Flask配合Jinja引擎、Django框架、Java配合vm模版引擎、NodeJS配合Jade。適合多頁面應用。其實如今大部分網站仍是這種形式。

瀏覽器渲染

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

服務器渲染

服務器接到用戶請求以後，計算出用戶須要的數據，而後將數據更新成視圖（也就是一串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代碼下載完成再請求數據，並會返回一個已經有內容的頁面。

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

渲染內容：服務端渲染會把」可視「部分先渲染，而後交給客戶端再做部分渲染。而客戶端渲染，則是從無到有，須要經歷完整的渲染步驟。　　

---

補充：

1. PHP文件、JSP文件、Python的Flask配合Jinja引擎、Django框架、Java配合vm模版引擎、NodeJS配合Jade是服務端渲染。

2. ajax動態生成html是瀏覽器渲染。