為了幫助我們理解服務端渲染，我們可以帶著以下幾個疑問開始本文的閱讀：什麼是服務端渲染？為什麼使用服務端渲染？什麼情況使用服務端渲染？如何使用服務端渲染？
什麼是伺服器渲染
要想理解服務端渲染，首先要清楚一個渲染的概念：渲染即是資料與模版組裝成html
客戶端渲染(CSR)與服務端渲染(SSR)
為了更好的理解服務端渲染，我們可以將服務端渲染與客戶端渲染對比著來看。
客戶端渲染
前端做檢視和互動，後端只提供介面資料，前端通過ajax向服務端請求資料，獲取到資料後通過js生成DOM插入HTML頁面，最終渲染給使用者。頁面程式碼在瀏覽器原始碼中看不到。
客戶端渲染優點：
- 使得伺服器計算壓力變輕
- 做到了前後端分離，在團隊開發中只要負責各自的任務即可，使開發效率有明顯提升。
客戶端渲染缺點：
- 不利於SEO、搜尋引擎爬蟲看不到完整的程式原始碼
- 請求增多時使用者等待時間變長，導致首屏渲染慢
- 消耗的是使用者瀏覽器的效能
服務端渲染
服務端在返回html之前，在特定的區域，符號裡用資料填充生成html，再傳送給客戶端html，客戶端解析html最終渲染出頁面給使用者，頁面程式碼在瀏覽器原始碼中看得到。
服務端渲染優點：
- 響應快，使用者體驗好，首屏渲染快
- 對搜尋引擎友好，搜尋引擎爬蟲可以看到完整的程式原始碼，有利於SEO
服務端渲染缺點：
- 增加了伺服器的計算壓力，消耗伺服器效能
- 不容易維護，如果不使用node中間層，前後端分工不明，不能進行良好的並行開發
兩種渲染對比
本質上兩種渲染都是一樣的，都是進行的字串拼接生成html,兩者的差別最終體現在時間消耗以及效能消耗上。
客戶端在不同網路環境下進行資料請求，客戶端需要經歷從js載入完成到資料請求再到頁面渲染這個時間段。導致了大量時間的消耗以及瀏覽器效能的消耗。而服務端在內網請求，資料響應快，不需要等待js程式碼載入，可以先請求資料再渲染可視部分然後返回給客戶端，客戶端再做二次渲染,這樣大部分消耗的是服務端的效能。客戶端頁面響應時間也更快。
具體可看下面的渲染路線圖：
為什麼使用服務端渲染
提到為什麼使用服務端渲染，首先要想到的是服務端渲染解決了什麼問題。根據上文我們可以簡單總結起來兩點。
首屏載入快
客戶端渲染下，除了載入html,還要等待js/css載入完成，之後執行js渲染出頁面，這個期間使用者一直在等待，而服務端只需要載入當前頁面的內容，而不需要一次性載入全部的 js 檔案。等待時間大大縮短，首屏載入變快。
利於SEO優化
服務端渲染出的頁面有助於搜尋引擎識別頁面內容，有利於SEO, 所謂SEO，指的是利用搜尋引擎的規則提高網站在有關搜尋引擎內的自然排名。現在的搜尋引擎爬蟲一般是全文分析的模式，分析內容涵蓋了一個網站主要3個部分的內容:文字、多媒體(主要是圖片)和外部連結，通過這些來判斷網站的型別和主題。對於客戶端渲染來說，搜尋引擎並不能收錄到 ajax 爬取資料之後然後再動態 js 渲染出來的頁面。而服務端渲染的頁面程式碼都可以在原始碼中看到，這有助於搜尋引擎識別。
什麼情況使用服務端渲染
我們已經知道服務端渲染端兩大優點就是首屏渲染和SEO優化，如果對於使用者體驗要求比較高的或者需要進行SEO優化的我們可以採用服務端渲染。但是不是一定要使用服務端渲染呢？答案是不一定，因為服務端渲染端成本相比客戶端渲染更昂貴(伺服器資源稀少而寶貴)，如果不是對使用者體驗或SEO要求到極致的話，我們依然可以選擇客戶端渲染，並在客戶端渲染上解決首屏優化慢和不利於SEO的缺點。
- 處理 SEO 問題時，使用 prerender、升級搜尋引擎。
- 白屏可以加 loading、Skeleton Screen 效果。
總的一句話：實際開發根據實際場景。
如何使用服務端渲染
基於react框架的服務端渲染開發推薦使用Next.js框架，Next.js 是一個輕量級的 React 服務端渲染應用框架。... 使React應用 更簡單 Next.js 是一個輕量級的 React 服務端渲染應用框架。
基於vue框架的服務端渲染開發推薦使用Nuxt.js框架. Nuxt.js 是一個基於 Vue.js 的輕量級應用框架,可用來建立服務端渲染 (SSR) 應用,也可充當靜態站點引擎生成靜態站點應用,具有優雅的程式碼結構分層和熱載入等特性
接下來我們來動手搭建一個基於Typescript+Ant-Design + Redux+Next.js的服務端渲染框架
參考連結
最後
原文在這裡：gitHub 如有遺漏，還請指正！！
如果覺得對您有幫助！請別忘記點個贊或者關注哦！您的關注將是我前進的動力！！衝鴨！！！
「無畏前端」不定時更新社群優秀技術文章！