前言
現在的web網站都是非常講究使用者體驗，一般都會採用服務端渲染加客戶端渲染一起實現功能。服務端渲染有利於搜尋引擎優化（SEO），利於被網頁爬蟲抓取資料，多見於電商網站商品資訊獲取等。客戶端渲染不利於搜尋引擎優化，網頁資料非同步獲取，首頁載入時間長，使用者體驗相對較好，常用於不需要對SEO友好的地方。
- 服務端渲染（SSR）
簡單理解就是瀏覽器傳送請求後，伺服器把客戶端網頁和資料在後臺渲染解析，之後把渲染後的結果返回客戶端。
客戶端拿到的是渲染後的結果，可以直接展示。伺服器端渲染的頁面在網路中傳輸的時候，傳輸的是一個真實的頁面。因此，爬蟲客戶端當爬到我們的頁面後，會分系我們給他提供的這個頁面，此時，我們頁面中的關鍵資料就會被爬蟲給收錄了。服務端渲染可以解決首頁白屏時間過久，但是也容易導致伺服器壓力大，因此，可以使用伺服器端的頁面快取技術，減輕伺服器的渲染壓力。
- 客戶端渲染（CSR）
在當今SPA框架，Vue，React，Angular大行天下的時候，前後端分離開發異常可見。客戶端渲染簡單理解就是瀏覽器傳送頁面請求，伺服器返回的是一個模板頁面，瀏覽器從上至下解析過程中需要傳送ajax請求獲取資料，最後再呼叫模板引擎（art-template等）渲染HTML結構，並把渲染後的結果新增到頁面指定容器中。
客戶端渲染因為資料是非同步獲取，所以在展示完整頁面的過程中最少發起兩次請求，資料是動態的新增到頁面中，因此，非常不利於SEO，便於前後端分離開發。現如今前端採用Vue等框架開發非常多見，因此為了解決純客戶端渲染面臨的問題，很多類似Vue中使用SSR和前後端同構的思想也非常常見。
小技巧
如何在頁面中快速的判斷到底那些是服務端渲染，那些是客戶端渲染？
滑鼠右鍵檢視原始碼，在頁面中看到的內容在原始碼中也可以檢視到，則是服務端渲染得到的。
滑鼠右鍵檢視原始碼，頁面中看到的內容在原始碼中不可以檢視到，則是客戶端渲染得到的。
舉例個小例子
在京東上開啟一個商品列表的頁面，右鍵檢視網頁原始碼，看到商品資訊都是服務端渲染的結果。
再開啟使用者評論區，看到的資訊都是客戶端渲染的結果。
說明
本篇文章出之我的Node.js系列教程之中，Node.js教程資料會更新在gitHub上，如果你覺得對你有幫助，希望給個star，夥伴們的點贊是我繼續更新的動力。
pubdreamcc原創 之 @github