SSR SPA是什麼?

介紹

SSR(Server Side Render)

伺服器端渲染: 伺服器端接收請求後，解析完整的html給前端，每次點擊按鈕或執行功能時，都需要重新繪製整個頁面

SPA(Single Page Application)

單頁式應用: 資料流動、頁面調動、DOM調整靠JS處理，伺服器僅提供一個頁面讓JS引入，就像單純使用一個應用程式

比較圖

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

發展流程

SSR ===> SPA ===> 混合 SSR + SPA(需優化SEO的話)

什麼是混合SSR + SPA?

介於有跟沒有之間

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

優缺點

SPA
- 優點:
  1. 減少頻寬的浪費
  2. 使用體驗較好
- 缺點:
  1. SEO評分稍差
  2. 因為打包的JS檔通常較大，頁面加載後都會需要較長時間來解析
SSR
- 優點:
  1. SEO評分較佳
  2. 加載速度快
  3. 對性能較不佳的手機或平板來說較友善
- 缺點:
  1. 每次點擊按鈕執行動作都需要重繪頁面
  2. 運算和流量都較大

參考

https://blog.niclin.tw/2019/01/06/淺述-ssr-spa-優缺點/

https://www.bnext.com.tw/article/49172/code-mvc-spa-ssr-html

wiki
https://en.wikipedia.org/wiki/Single-page_application

https://medium.com/schaoss-blog/前端三十-18-fe-為什麼網站要做成-spa-ssr-的優點是什麼-c926145078a4

tags: `網站知識` `中午分享`