問(wèn)題描述

我現(xiàn)在就只是前端用用框架寫(xiě)一寫(xiě)SPA，然后后臺(tái)只是處理下數(shù)據(jù)庫(kù)相關(guān)的數(shù)據(jù)，前后就restful形式的API傳遞下數(shù)據(jù)，至于這些個(gè)渲染毫無(wú)概念。所謂的服務(wù)端渲染就是指在后臺(tái)生成html文件傳給前端，那對(duì)于react和Vue這種引入了虛擬DOM的呢？前端渲染是指什么，解析html生成DOM樹(shù)然后繪制頁(yè)面？前端渲染和客戶端渲染是指同一個(gè)意思吧？前端渲染和服務(wù)端渲染應(yīng)用場(chǎng)景都有哪些？

問(wèn)題解答

一言兩句難以詮釋清楚, 可以參考下面的鏈接:前端渲染和后端渲染后端渲染html、前端模板渲染html，jquery的html，各有什么區(qū)別？精讀前后端渲染之爭(zhēng)

首先渲染，在這兒應(yīng)該是只將數(shù)據(jù)和模版組裝成html。

前后端分離加上SPA的情況下，后端除了關(guān)鍵路徑帶認(rèn)證那種的請(qǐng)求給你重定向之外，一般的路由邏輯都是前后端共享的，部分處理邏輯也是前后端共享，并且后端提供數(shù)據(jù)接口，與接口相關(guān)的數(shù)據(jù)處理邏輯就是后端獨(dú)有。

在SPA場(chǎng)景下服務(wù)端渲染都是針對(duì)第一次get請(qǐng)求，用于生產(chǎn)完整的html給瀏覽器，瀏覽器直接出首屏。客戶端渲染都是針對(duì)客戶端狀態(tài)變化，請(qǐng)求了數(shù)據(jù)，進(jìn)行局部dom變化（局部可能大到整個(gè)body）。react/vue在這種場(chǎng)景下，服務(wù)端僅僅將jsx/模版轉(zhuǎn)換成html，客戶端根據(jù)props/state變化，協(xié)調(diào)虛擬dom和真實(shí)dom之間的同步。

在傳統(tǒng)前后端分離場(chǎng)景下，后端負(fù)責(zé)渲染完整html，前端js負(fù)責(zé)交互之后，改變幾個(gè)文字動(dòng)畫(huà)之類(lèi)的。沒(méi)有前端渲染。

綜述：

虛擬dom僅僅存在于前端，用于協(xié)調(diào)虛擬dom和真實(shí)dom差異，最小化更新真實(shí)dom。

前端渲染指 解析數(shù)據(jù)和模版，生成dom。跟后端一致。

是的，同一個(gè)意思，在web場(chǎng)景下。

前端渲染：不想每次小變化都請(qǐng)求服務(wù)端重新生成整個(gè)dom的場(chǎng)景。服務(wù)端渲染：絕大多數(shù)場(chǎng)景，極端場(chǎng)景是客戶端禁用js的時(shí)候。僅僅用前端渲染的場(chǎng)景估計(jì)是公司架構(gòu)不允許react/vue做渲染（尚未部署node服務(wù)器）。通常情況，前后端渲染都有。

IT界有一個(gè)不好的習(xí)慣就是會(huì)造一個(gè)花里胡哨的名詞讓你不知道具體細(xì)節(jié)：

后端渲染：后端的程序在把html頁(yè)面吐給前端之前，先把html頁(yè)面上的特定區(qū)域，特定符號(hào)，給用數(shù)據(jù)填充過(guò)，再扔給前端，這就是后端渲染，所謂渲染，你可以理解一種修改，渲染這詞最早來(lái)源于游戲領(lǐng)域，游戲領(lǐng)域又來(lái)源于現(xiàn)實(shí)畫(huà)畫(huà)，渲染嘛，拿著顏料往紙上涂便是。以前絕大部分服務(wù)器都是這個(gè)模式

前端渲染：后端的html頁(yè)面作為靜態(tài)文件存在，前端請(qǐng)求時(shí)后端不對(duì)該文件做任何內(nèi)容上的修改，直接以資源的方式返回給前端，前端拿到頁(yè)面后，根據(jù)寫(xiě)在html頁(yè)面上的js代碼，對(duì)該html的內(nèi)容進(jìn)行修改（涂顏料）。這就是前段渲染