何為渲染？如果我們只是想顯示一堆不變的數(shù)據(jù)，那么我們直接寫(xiě)一個(gè)a.html丟到服務(wù)器上讓客戶端訪問(wèn)就可以了。但這是基本不可能的事情，數(shù)據(jù)一般是變化的。你不可能為每套數(shù)據(jù)寫(xiě)一個(gè)視圖，所以我們需要分離數(shù)據(jù)和視圖，然后使用一種技術(shù)將數(shù)據(jù)塞到視圖中，這種技術(shù)就叫渲染。這工作放在服務(wù)器上做就是服務(wù)器渲染，放在瀏覽器做就是瀏覽器渲染。

這里的渲染，就是指生成html文檔的過(guò)程，和瀏覽器渲染html沒(méi)有關(guān)系。

瀏覽器端渲染，指的是用js去生成html，前端做路由。舉例：React, Vue等等前端框架。適合單頁(yè)面應(yīng)用程序。

服務(wù)器端渲染，指的是用后臺(tái)語(yǔ)言通過(guò)一些模版引擎生成html。舉例：PHP文件、JSP文件、Python的Flask配合Jinja引擎、Django框架、Java配合vm模版引擎、NodeJS配合Jade。適合多頁(yè)面應(yīng)用。其實(shí)現(xiàn)在大部分網(wǎng)站還是這種形式。

所以有為了讓單頁(yè)面應(yīng)用利于SEO，讓服務(wù)器和客戶端同構(gòu)，也使用React/Vue渲染的方案。

PS: Segmentfault也是服務(wù)端渲染。

瀏覽器渲染

單頁(yè)應(yīng)用用的基本都是瀏覽器渲染。優(yōu)點(diǎn)很明確，后端只提供數(shù)據(jù)，前端做視圖和交互邏輯，分工明確。服務(wù)器只提供接口，路由以及渲染都丟給前端，服務(wù)器計(jì)算壓力變輕了。但是弱點(diǎn)就是用戶等待時(shí)間變長(zhǎng)了，尤其在請(qǐng)求數(shù)多而且有一定先后順序的時(shí)候。

服務(wù)器渲染

服務(wù)器接到用戶請(qǐng)求之后，計(jì)算出用戶需要的數(shù)據(jù)，然后將數(shù)據(jù)更新成視圖（也就是一串dom字符）發(fā)給客戶端，客戶端直接將這串字符塞進(jìn)頁(yè)面即可。這樣做的好處是響應(yīng)很快，用戶體驗(yàn)會(huì)比較好，另外對(duì)于搜索引擎來(lái)說(shuō)也是友好的，有SEO優(yōu)化。nodejs層的服務(wù)器渲染，還有一個(gè)明顯的好處就是前端性能優(yōu)化更順手了，可操作的空間大了。但是缺點(diǎn)也很明顯，如果不是增加一個(gè)node層的話，前后端責(zé)任分工不明，不能很好的并行開(kāi)發(fā)。另外也增加了服務(wù)器計(jì)算壓力（雖然可以做渲染緩存，但畢竟是多做了計(jì)算）。

客戶端渲染路線：

1. 請(qǐng)求一個(gè)html -> 2. 服務(wù)端返回一個(gè)html -> 3. 瀏覽器下載html里面的js/css文件 -> 4. 等待js文件下載完成 -> 5. 等待js加載并初始化完成 -> 6. js代碼終于可以運(yùn)行，由js代碼向后端請(qǐng)求數(shù)據(jù)( ajax/fetch ) -> 7. 等待后端數(shù)據(jù)返回 -> 8. 客戶端從無(wú)到完整地，把數(shù)據(jù)渲染為響應(yīng)頁(yè)面

服務(wù)端渲染路線：

1. 請(qǐng)求一個(gè)html -> 2. 服務(wù)端請(qǐng)求數(shù)據(jù)( 內(nèi)網(wǎng)請(qǐng)求快 ) -> 3. 服務(wù)器初始渲染（服務(wù)端性能好，較快） -> 4. 服務(wù)端返回已經(jīng)有正確內(nèi)容的頁(yè)面 -> 5. 客戶端請(qǐng)求js/css文件 -> 6. 等待js文件下載完成 -> 7. 等待js加載并初始化完成 -> 8. 客戶端把剩下一部分渲染完成( 內(nèi)容小，渲染快 )

對(duì)同一個(gè)組件，服務(wù)端渲染“可視的”一部分( render/componentWillMount部分代碼 )，為確保組件有完善的生命周期及事件處理，客戶端需要再次渲染。即：服務(wù)端渲染，實(shí)際上也是需要客戶端進(jìn)行 再次地、但開(kāi)銷很小的二次渲染。

根據(jù)以上特點(diǎn)，在用戶體驗(yàn)要求比較高的頁(yè)面（首屏）、重復(fù)較多的公共頁(yè)面可以考慮使用服務(wù)器渲染，減少ajax請(qǐng)求和提升用戶體驗(yàn)。

時(shí)間耗時(shí)比較：

數(shù)據(jù)請(qǐng)求：由服務(wù)端請(qǐng)求數(shù)據(jù)而不是客戶端請(qǐng)求數(shù)據(jù)，這是“快”的一個(gè)主要原因。服務(wù)端在內(nèi)網(wǎng)進(jìn)行請(qǐng)求，數(shù)據(jù)響應(yīng)速度快。客戶端在不同網(wǎng)絡(luò)環(huán)境進(jìn)行數(shù)據(jù)請(qǐng)求，且外網(wǎng)http請(qǐng)求開(kāi)銷大，導(dǎo)致時(shí)間差（主要原因）。

步驟：服務(wù)端是先請(qǐng)求數(shù)據(jù)然后渲染“可視”部分，而客戶端是等待js代碼下載、加載完成再請(qǐng)求數(shù)據(jù)、渲染。即：服務(wù)端渲染不用等待js代碼下載完成再請(qǐng)求數(shù)據(jù)，并會(huì)返回一個(gè)已經(jīng)有內(nèi)容的頁(yè)面。

渲染性能：服務(wù)端性能比客戶端高，渲染速度快( 猜測(cè)，該項(xiàng)數(shù)據(jù)不詳 )。

渲染內(nèi)容：服務(wù)端渲染會(huì)把”可視“部分先渲染，然后交給客戶端再作部分渲染。而客戶端渲染，則是從無(wú)到有，需要經(jīng)歷完整的渲染步驟。