Skip to main content

📄 Framework

1. Please explain and compare the advantages and disadvantages of SPA and SSR​

請解釋並比較 SPA 和 SSR 的優缺點

SPA(單頁式應用程式)​

SPA 優點​

  1. 使用者體驗：SPA 的本質就是一個頁面，只是透過動態載入資料，結合前端的路由，讓使用者認為有在切換頁面，但實際上只是切換 component，這樣的使用體驗自然更為絲滑快速。
  2. 前後端分離：前端只需要負責頁面渲染與互動，而後端則只需要提供數據 API，不但減輕彼此開發的負擔，也更易維護。
  3. 網路優化：因為只需要載入一次頁面，不像傳統多頁面結構，每次切換頁面都需要重新載入，自然也就減少了請求的次數，降低 server 端的負擔。

SPA 缺點​

  1. 搜尋引擎優化(SEO)：SPA 的頁面都是動態載入的，因此搜尋引擎無法直接抓取到頁面內容(雖然近年 Google 聲稱有在改善這點)，面對搜尋引擎的爬蟲，還是不如傳統的 HTML。
  2. 首頁載入時間：SPA 需要在 client 端載入並執行 Javascript，才能渲染出頁面，因此首頁的載入時間會比較長，尤其是在網路狀況不佳的情況下，可能會導致首次載入時間延遲。

SSR(伺服器端渲染)​

SSR 優點​

  1. 搜尋引擎優化(SEO)：因為 SSR 是在 server 端就已經渲染好包含數據的頁面，因此搜尋引擎可以直接抓取到頁面內容，這也是 SSR 最大的優勢。
  2. 載入時間：因為 SSR 將原本的渲染負擔轉移到 server 端，可以縮短首次進入的渲染時間。

SSR 缺點​

  1. 學習成本和複雜度：以 Next 和 Nuxt 為例，雖然他們本質都是奠基在 React 和 Vue 上，但是他們已經各自衍生出自己的生態系，無形中抬高了學習成本，以近期的 Next.js 14 改版來看，客觀來說，並不是每個開發者都能接受這樣的改變。
  2. 伺服器負擔：因為渲染的工作轉移到 server 端，可能會對 server 造成更大的負擔，尤其如果是遇到高流量的應用場景。

結論​

原則上，如果是後台的系統，在沒有 SEO 的需求下，應該是沒必要使用 SSR 框架，除非是仰賴搜尋引擎的產品網頁，那確實可以評估採用 SSR 框架開發。