前言 現在的web網站都是非常講究用戶體驗，一般都會採用服務端渲染加客戶端渲染一起實現功能。服務端渲染有利於搜索引擎優化（SEO），利於被網頁爬蟲抓取數據，多見於電商網站商品信息獲取等。客戶端渲染不利於搜索引擎優化，網頁數據非同步獲取，首頁載入時間長，用戶體驗相對較好，常用於不需要對SEO友好的地方。 ...
前言
現在的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
