服務端渲染vs客戶端渲染到先後端同構

關於服務端渲染與客戶端渲染的優劣，互聯網上已經有過不少的文章進行過度析，在這裏我談一下我我的的看法。

首先，仍是來老生常談一下關於兩種渲染方式的主要優劣：

服務端渲染（僅列出當下最突出的優劣）：

優：

• SEO友好（目前現狀下，我認爲是最大的優勢，也是最大的需求）
• 首屏渲染速度快（不用下載臃腫的bundle.js）

劣：

• 增長服務器壓力（在訪問量猛增時，這是很是致命的，可能直接致使服務器掛掉）
• 交互方式單一，沒法進行異步刷新（能夠經過後端在html中插入js代碼綁定事件來實現異步刷新）

客戶端渲染的優劣則與服務端渲染相反。

在十幾年前，那時候javascript尚未興起，web開發仍是使用傳統的ASP、Java、PHP等語言，渲染方式也就侷限於服務端渲染。可是隨着jQuery的發展，異步加載技術的成熟，前端所作的事情也就愈來愈多。隨着一批批前端開發人員對於交互體驗的不斷完善，頁面性能的極致追求，在近幾年不斷涌現出很是優秀的前端框架庫，好比說當下最流行的Angular、React、Vue和處於成長階段的next.js、阿里的beidou框架等。能夠說，現在js真可謂是百家爭鳴了。

從一開始後端語言驅動的服務端渲染，到現在React等前端框架引領的客戶端渲染，不論是用戶體驗方面，仍是性能方面，都有了一個質的提高。當咱們正享受着客戶端渲染帶來的溫馨時，一部分互聯網企業又悄悄的變回了服務端渲染，這樣一個逆着發展方向的作法，實屬無奈的選擇，很大一方面是爲了應對國內某度尷尬的SEO。爲了針對服務端渲染的需求，React還實現了renderToString的方法用來將根據數據生成的dom結構轉成相應字符串，方便由後端輸出給前端。至於Vue和Angular有沒有實現相似的方法尚未去了解過，用興趣的同窗能夠去他們的官網查下文檔。

據我所知，Google已經實現了能夠經過執行頁面中js代碼的方式來爬取數據，也就是說，Google已經有能力爬取客戶端渲染的頁面了（不是崇洋媚外，確實人家作的比國內好），而國內某度，還停留在爬取html的階段。單純的客戶端渲染，html文件是沒有實質性內容的，全部內容都是經過js異步加載來的，因而某度面對客戶端渲染的頁面，只能兩眼一黑。

不過，國內搜索引擎終究也會實現對客戶端渲染頁面的爬取的，這只是一個時間問題罷了。雖說在當下，服務端渲染這個最大的優勢仍是客戶端渲染沒法解決的，可是隨着時間的推移，互聯網的進步，這都將再也不是問題。

再來講說首屏渲染的問題。用過React或者Vue的同窗都知道，打包出來的bundle.js文件大小一般都在1M以上，而這個入口js一般要在渲染首頁以前徹底下載完畢，而後再運行其中的js獲取數據、渲染頁面，這是spa頁面加載的一個機制。js的運行、數據的獲取、頁面的渲染這些都是瀏覽器的工做，基於如今的V8引擎，這些步驟均可以很快完成，而這個1M以上甚至更大的入口js的下載就是一個很是大的問題了。若是是pc端，在目前國內正經常使用戶的網絡環境下，這點大小的文件還不成問題，但若是是移動端，就要好好考慮一下了。在4G網絡環境下，這1M的文件能夠說下載起來很是輕鬆，1秒就能夠下載完畢；若是使用3G網絡，則1M大概須要下載4到5秒，這個時間已經影響到用戶體驗了；若是使用2G網絡，或者在信號很差的地方，那這個時間就慘不忍睹了，用戶須要等待漫長的白屏，甚至會形成當前頁面已經打不開了的誤解。

客戶端渲染流程

針對這種網絡情況很差的狀況下，首屏渲染極慢的問題，有人提出了同構的思想。其意爲先後端使用同一套代碼，首屏使用服務端渲染，將渲染好的html直接交給瀏覽器去渲染，瀏覽器渲染出首屏以後繼續下載bundle.js，運行js，而且從新渲染頁面。因爲渲染好的html流相較於bundle.js來講，體積小了不少，因此採用同構方式的web頁面，必定程度上解決了首屏渲染慢的問題，並且合理利用緩存策略還能夠必定程度減輕服務器壓力。固然這種模式當中還存在着其餘問題，在這裏就不細說了。

同構渲染流程

使用同構這種開發模式，雖然不能徹底解決SEO的問題，可是首屏是能夠被爬取的，若是說項目不是相似於淘寶這種內容型網站（網站內部各個頁面都有SEO需求），那麼這種模式就很是優秀了，解決了純客戶端渲染在當下面臨的兩個最大的問題。

在今年舉辦的第12屆D2前端大會上，筆者又聽到了一個十分優秀的想法，而且阿里已經將之實現並申請了專利————智能降級策略。具體名字是否是這個已經記不太清了，大體內容是在同構的基礎之上，優先使用服務端渲染，當訪問量激增致使服務器負載超過設置的閾值以後，智能將部分渲染任務交給客戶端處理，使服務器承受壓力下降（想一想就很厲害啊，畢竟阿里，有錢有人有才）。

毫無疑問，同構或者智能降級在面對當前國內互聯網發展情況下，是很是有發展空間的。可是若是須要考慮到開發成本和硬件成本，單純的客戶端渲染仍是佔有優點的。同構或許是web開發的一個方向，可是毫不僅僅是惟一的一條路，具體採用什麼樣的方式構建項目，仍是須要根據具體項目的需求來肯定。

文中圖片來源於 以同構之名，再談 Redux/Vuex 的必要性