前端渲染：

指的是后端返回JSON數(shù)據(jù)，前端利用預(yù)先寫的html模板，循環(huán)讀取JSON數(shù)據(jù)，拼接字符串（es6的模板字符串特性大大減少了拼接字符串的的成本），并插入頁(yè)面。

好處：網(wǎng)絡(luò)傳輸數(shù)據(jù)量小。不占用服務(wù)端運(yùn)算資源（解析模板），模板在前端（很有可能僅部分在前端），改結(jié)構(gòu)變交互都前端自己來(lái)了，改完自己調(diào)就行。

壞處：前端耗時(shí)較多，對(duì)前端工作人員水平要求相對(duì)較高。前端代碼較多，因?yàn)椴糠忠郧霸诤笈_(tái)處理的交互邏輯交給了前端處理。占用少部分客戶端運(yùn)算資源用于解析模板。

后端渲染：

前端請(qǐng)求，后端用后臺(tái)模板引擎直接生成html，前端接受到數(shù)據(jù)之后，直接插入頁(yè)面。

好處：前端耗時(shí)少，即減少了首屏?xí)r間，模板統(tǒng)一在后端。前端（相對(duì)）省事，不占用客戶端運(yùn)算資源（解析模板）

壞處：占用服務(wù)器資源。

前端渲染與后端渲染對(duì)比：

后端渲染：

頁(yè)面呈現(xiàn)速度：快，受限于用戶的帶寬
流量消耗：少一點(diǎn)點(diǎn)（可以省去前端框架部分的代碼）
可維護(hù)性：差（前后端東西放一起，掐架多年，早就在鬧分手啦）
seo友好度：好
編碼效率：低（這個(gè)跟不同的團(tuán)隊(duì)不同，可能不對(duì)）

前端渲染：

頁(yè)面呈現(xiàn)速度：主要受限于帶寬和客戶端機(jī)器的好壞，優(yōu)化的好，可以逐步動(dòng)態(tài)展開(kāi)內(nèi)容，感覺(jué)上會(huì)更快一點(diǎn)。

流量消耗：多一點(diǎn)點(diǎn)（一個(gè)前端框架大概50KB）當(dāng)然，有的用后端渲染的項(xiàng)目前端部分也有在用框架。

可維護(hù)性：好，前后端分離，各施其職，代碼一目明了。
SEO友好度：差，大量使用ajax，多數(shù)瀏覽器不能抓取ajax數(shù)據(jù)。
編碼效率：高，前后端各自只做自己擅長(zhǎng)的東西，后端最后只輸出接口，不用管頁(yè)面呈現(xiàn)，只要前后端人員能力不錯(cuò)，效率不會(huì)低。