iT邦幫忙

2021 iThome 鐵人賽

DAY 3
1
自我挑戰組

Vue.js 從零開始系列 第 3

Vue.js 從零開始:SSR、MPA、SPA的概念

每次網路搜尋關鍵字SSR、MPA、SPA,都會有看沒有懂的感覺,看完過沒多久馬上就忘了,藉由這次機會,一次把觀念整理起來,之後還可以複習一下,一舉兩得!


Server Side Render(伺服器端渲染)

早期還沒有前後端分離的概念,大部分都是由後端負責渲染畫面。
https://ithelp.ithome.com.tw/upload/images/20210916/20118347ZK4jAlJMUM.png

  • Model:資料保存
  • Controller:控制器,數據處理
  • View:展示數據

瀏覽器發出請求給Server,Server再丟給控制器處理,存取資料後再丟給View產生一份完整的HTML檔案,最後顯示在畫面上。


Single Page Application(單頁式應用)

意思就是整個畫面只有一個HTML檔案再執行,Vue使用元件系統,加上AJAX非同步概念,做到只有某區塊會更新畫面,瀏覽器不用重新載入(不用換頁),提高使用者的體驗。

使用SPA做的網頁,點選右鍵->檢視原始碼,會出現一堆JavaScript檔案:
https://ithelp.ithome.com.tw/upload/images/20210916/20118347GFk7jUmOiL.png

由上圖看出來Vue是用JvaScript載入後台的數據,並且動態產生元件,而SEO只能抓取HTML內容,導致無法抓到該有的數據,爬蟲會找不到東西,導致SEO搜尋流量變得很差。

優點:

  • 前後端分工
  • 使用者體驗佳
  • 組件化開發,程式邏輯較好管理

缺點:

  • 不利於SEO

小補充:AJAX不是單一技術的名詞,而是綜合性的瀏覽器端網頁開發技術,非同步請求(Asynchronous request)就是其中一項技術,概念如下圖:
https://ithelp.ithome.com.tw/upload/images/20210916/20118347a94UfcFZCe.png

客戶端client對伺服器端server送出request請求 之後,不需要等待結果,可以持續處理其他事件。


Multiple Page Application(多頁式應用)

MPA多頁式的網頁架構,點選其他頁面都需要重新加載頁面(不同網址),內容通常包含複雜的結構,使用者體驗較差。

優點:

  • 利於SEO

缺點:

  • 切換到不同頁面時,都需重新載入資料。
  • 使用者體驗較差。
  • 複雜的開發,不好維護。

下一篇來學習,SPA是如何解決SEO的問題,還有MVC的一些概念。

/images/emoticon/emoticon01.gif

參考資料:
huli
跟著小明一起搞懂技術名詞
AJAX


上一篇
Vue.js 從零開始:MVVM、漸進式框架
下一篇
Vue.js 從零開始:SPA怎麼改善SEO呢? MVC與關注點分離又是什麼?
系列文
Vue.js 從零開始30

尚未有邦友留言

立即登入留言