淺談服務器渲染以及前后端分離兩種開發模式
-
-
服務器渲染
客戶端輸入URL發送請求,服務器接收到請求后找到資源文件(該文件中做了數據動態的綁定),在渲染完成之后,把渲染好的頁面直接發回給客戶端,客戶端直接呈現即可
該模式下的優缺點:- 優點:客戶端呈現的內容都是服務器處理好的,在源代碼中所有的內容都可以看到->利于SEO搜索引擎的優化
- 缺點:
1. 重后端輕前端->配合分工都有問題(不能同時開發)
2.服務器端處理的事情多->服務器壓力大
3. 頁面需要局部刷新時也要后端重新把所有的結構重新再渲染一遍,返回最新的結構=>客戶端需要刷新才能看到最新信息(全局更新)
Vue/React中的SSR服務器渲染方式:Vue->nuxt.js / React->next.js
-
服務器渲染
-
-
前后端分離:
客戶端輸入URL向WEB服務器(該服務器部署前端相關資源)發送請求,WEB服務器接收請求后找到資源文件(該文件只寫了結構與樣式,并沒有做動態數據綁定),返回該文件后(源代碼中只能看到這個文件的代碼),服務器通過AJAX再向數據服務器(該服務器部署后端相關)發送請求,該服務器從數據庫中讀取數據返回,客戶端拿到數據后再把數據插入到指定容器中,實現客戶端渲染。
該模式下的優缺點:
- 優點:
1.前后端分離,前后端任務比例拉近(基本一致),加快開發效率,提高團隊配合度
2 可以通過ajax、fetch實現局部刷新(前后端數據部署在不同服務器,所以客戶端通過ajax/fetch請求數據時會跨域) - 缺點:JS綁定的數據不會在頁面源代碼中展現,不利于SEO
-
前后端分離:
骨架屏方案:
第一屏內容是由服務器端渲染的(只要服務器抗壓性能好,可以提高頁面第一次打開的渲染速度)
其余內容都是前后端分離的(客戶端渲染)