如何理解服務端渲染？

爲了幫助咱們理解服務端渲染，咱們能夠帶着如下幾個疑問開始本文的閱讀：什麼是服務端渲染？爲何使用服務端渲染？什麼狀況使用服務端渲染？如何使用服務端渲染？

什麼是服務器渲染

要想理解服務端渲染，首先要清楚一個渲染的概念：渲染便是數據與模版組裝成html

客戶端渲染(CSR)與服務端渲染(SSR)

爲了更好的理解服務端渲染，咱們能夠將服務端渲染與客戶端渲染對比着來看。

客戶端渲染

前端作視圖和交互，後端只提供接口數據，前端經過ajax向服務端請求數據，獲取到數據後經過js生成DOM插入HTML頁面，最終渲染給用戶。頁面代碼在瀏覽器源代碼中看不到。
客戶端渲染優勢：

1. 使得服務器計算壓力變輕
2. 作到了先後端分離，在團隊開發中只要負責各自的任務便可，使開發效率有明顯提高。

客戶端渲染缺點：

1. 不利於SEO、搜索引擎爬蟲看不到完整的程序源碼
2. 請求增多時用戶等待時間變長，致使首屏渲染慢
3. 消耗的是用戶瀏覽器的性能

服務端渲染

服務端在返回html以前，在特定的區域，符號裏用數據填充生成html，再發送給客戶端html，客戶端解析html最終渲染出頁面給用戶，頁面代碼在瀏覽器源代碼中看獲得。
服務端渲染優勢：

1. 響應快，用戶體驗好，首屏渲染快
2. 對搜索引擎友好，搜索引擎爬蟲能夠看到完整的程序源碼，有利於SEO

服務端渲染缺點：

1. 增長了服務器的計算壓力，消耗服務器性能
2. 不容易維護，若是不使用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的服務端渲染框架

參考連接

服務器端渲染和客戶端渲染的區別
服務端渲染（SSR）

最後

原文在這裏：gitHub 若有遺漏，還請指正！！

若是以爲對您有幫助！請別忘記點個贊或者關注哦！您的關注將是我前進的動力！！衝鴨！！！

「無畏前端」不定時更新社區優秀技術文章！