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

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

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

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

骨架屏方案：

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