服務端渲染:
狹義的理解,就是前后端分離技術流行前傳統(tǒng)的模板引擎渲染方式(例如 Java 的 JSP,C# 的 Razor)
大致的流程就是這樣:
? ? ? 瀏覽器向服務端發(fā)送請求 -->
? ? ? 服務端在接收到請求之后,取得相關數(shù)據(jù) -->
? ? ? 利用這些數(shù)據(jù)拼接好頁面 -->
? ? ? 將這個頁面返回給瀏覽器?-->
? ? ? 瀏覽器直接把頁面渲染出來
客戶端渲染:
狹義的理解,就是現(xiàn)在流行的前后端分離密似,前端的渲染方式
在這里可以思考下使用前后端分離技術后躯喇,和傳統(tǒng)的模板引擎開發(fā)有什么區(qū)別
大致的流程:
? ? ? ?瀏覽器請求前端部署的靜態(tài)資源(html , js , css 等等) -->
? ? ? ?將靜態(tài)資源渲染出來 -->
? ? ? ?頁面上的 Js 向后端部署的接口發(fā)送請求(ajax)并接收返回數(shù)據(jù) -->
? ? ? ?前端用自己的方式將數(shù)據(jù)填充到頁面上
所以不想深入探究的話匾寝,可以簡單的就理解成:
服務端渲染就是后端利用模板引擎生成頁面,客戶端渲染就是前端利用ajax請求生成頁面
各自的優(yōu)缺點:
服務端渲染最大也是最核心的兩個優(yōu)點:SEO和首屏渲染快斟或,而這恰恰是客戶端渲染最大的兩個缺點
客戶端渲染,優(yōu)點很多:
1.前后端分離集嵌,讓專業(yè)的人做專業(yè)的事萝挤,前端開發(fā)可以掌握更多的話語權,后端開發(fā)也不用再為寫前臺交互絞盡腦汁
2.ajax 的好處眾所周知根欧,局部刷新
3.節(jié)約服務器的性能怜珍,這個很容易理解吧,服務端渲染服務器既要取數(shù)據(jù)凤粗,又要拼頁面酥泛,現(xiàn)在前端把拼接頁面的活拿過去了,服務器自然輕松很多
4.除首頁之外性能響應很快
服務端渲染的缺點:
1.技術老舊嫌拣,傳統(tǒng)的模板引擎已經(jīng)跟不上時代了(很少有人在比較時提到這一點柔袁,但我覺得這恰恰應該是程序員關注的點)
2.前后端耦合性太大
客戶端渲染的缺點上面已經(jīng)提到
使用場景:
阻礙使用客戶端渲染最大的問題就是SEO
只要不是需要SEO的場景,都可以考慮使用客戶端渲染的技術异逐,前后端分離開發(fā)捶索。
那么問題來了,如果我既想前后端分離開發(fā)灰瞻,又想支持SEO怎么辦腥例?
現(xiàn)在已經(jīng)有了同構(gòu)渲染的概念,又叫前端的服務端渲染(例如 Vue 的 Nuxt,React 的 Next)酝润,這個以后有機會再來贅述