前端渲染：

指的是後端返回JSON資料，前端利用預先寫的html模板，迴圈讀取JSON資料，拼接字串（es6的模板字串特性大大減少了拼接字串的的成本），並插入頁面。

好處：網路傳輸資料量小。不佔用服務端運算資源（解析模板），模板在前端（很有可能僅部分在前端），改結構變互動都前端自己來了，改完自己調就行。

壞處：前端耗時較多，對前端工作人員水平要求相對較高。前端程式碼較多，因為部分以前在後臺處理的互動邏輯交給了前端處理。佔用少部分客戶端運算資源用於解析模板。

後端渲染：

前端請求，後端用後臺模板引擎直接生成html，前端接受到資料之後，直接插入頁面。

好處：前端耗時少，即減少了首屏時間，模板統一在後端。前端（相對）省事，不佔用客戶端運算資源（解析模板）

壞處：佔用伺服器資源。

前端渲染與後端渲染對比：

後端渲染：

頁面呈現速度：快，受限於使用者的頻寬
流量消耗：少一點點（可以省去前端框架部分的程式碼）
可維護性：差（前後端東西放一起，掐架多年，早就在鬧分手啦）
seo友好度：好
編碼效率：低（這個跟不同的團隊不同，可能不對）

前端渲染：

頁面呈現速度：主要受限於頻寬和客戶端機器的好壞，優化的好，可以逐步動態展開內容，感覺上會更快一點。

流量消耗：多一點點（一個前端框架大概50KB）當然，有的用後端渲染的專案前端部分也有在用框架。

可維護性：好，前後端分離，各施其職，程式碼一目明瞭。
SEO友好度：差，大量使用ajax，多數瀏覽器不能抓取ajax資料。