十一:服務器渲染VS前后端分離

淺談服務器渲染以及前后端分離兩種開發模式

    1. 服務器渲染
      客戶端輸入URL發送請求,服務器接收到請求后找到資源文件(該文件中做了數據動態的綁定),在渲染完成之后,把渲染好的頁面直接發回給客戶端,客戶端直接呈現即可
      該模式下的優缺點:
      • 優點:客戶端呈現的內容都是服務器處理好的,在源代碼中所有的內容都可以看到->利于SEO搜索引擎的優化
      • 缺點:
        1. 重后端輕前端->配合分工都有問題(不能同時開發)
        2.服務器端處理的事情多->服務器壓力大
        3. 頁面需要局部刷新時也要后端重新把所有的結構重新再渲染一遍,返回最新的結構=>客戶端需要刷新才能看到最新信息(全局更新)

    Vue/React中的SSR服務器渲染方式:Vue->nuxt.js / React->next.js

    1. 前后端分離
      客戶端輸入URL向WEB服務器(該服務器部署前端相關資源)發送請求,WEB服務器接收請求后找到資源文件(該文件只寫了結構與樣式,并沒有做動態數據綁定),返回該文件后(源代碼中只能看到這個文件的代碼),服務器通過AJAX再向數據服務器(該服務器部署后端相關)發送請求,該服務器從數據庫中讀取數據返回,客戶端拿到數據后再把數據插入到指定容器中,實現客戶端渲染。
      該模式下的優缺點:
    • 優點:
      1.前后端分離,前后端任務比例拉近(基本一致),加快開發效率,提高團隊配合度
      2 可以通過ajax、fetch實現局部刷新(前后端數據部署在不同服務器,所以客戶端通過ajax/fetch請求數據時會跨域)
    • 缺點:JS綁定的數據不會在頁面源代碼中展現,不利于SEO
骨架屏方案:

第一屏內容是由服務器端渲染的(只要服務器抗壓性能好,可以提高頁面第一次打開的渲染速度)
其余內容都是前后端分離的(客戶端渲染)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容