問題描述

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

問題解答

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

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

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

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

在傳統(tǒng)前后端分離場景下，后端負責渲染完整html，前端js負責交互之后，改變幾個文字動畫之類的。沒有前端渲染。

綜述：

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

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

是的，同一個意思，在web場景下。

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

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

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

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