---
slideOptions:
transition: slide
---

# SSR SPA是什麼?

---
## 介紹
---
### SSR(Server Side Render)
> 伺服器端渲染: 伺服器端接收請求後，解析完整的html給前端，每次點擊按鈕或執行功能時，都需要重新繪製整個頁面
### SPA(Single Page Application)
> 單頁式應用: 資料流動、頁面調動、DOM調整靠JS處理，伺服器僅提供一個頁面讓JS引入，就像單純使用一個應用程式
---

## 比較圖

## 發展流程
### SSR ===> SPA ===> 混合 SSR + SPA(需優化SEO的話)

## 什麼是混合SSR + SPA?
### ~~介於有跟沒有之間~~

## 優缺點
* SPA
* 優點:
1. 減少頻寬的浪費
2. 使用體驗較好
* 缺點:
1. SEO評分稍差
2. 因為打包的JS檔通常較大，頁面加載後都會需要較長時間來解析
* SSR
* 優點:
1. SEO評分較佳
2. 加載速度快
3. 對性能較不佳的手機或平板來說較友善
* 缺點:
1. 每次點擊按鈕執行動作都需要重繪頁面
2. 運算和流量都較大
<!-- ## 須注意事項
>我們可以用三個問題來幫助自己理解一項事物：
1. 為什麼要有XXX？
2. 沒有XXX跟有XXX的區別是什麼？
3. 所以XXX是什麼？ -->

## 參考
https://blog.niclin.tw/2019/01/06/%E6%B7%BA%E8%BF%B0-ssr-spa-%E5%84%AA%E7%BC%BA%E9%BB%9E/

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/%E5%89%8D%E7%AB%AF%E4%B8%89%E5%8D%81-18-fe-%E7%82%BA%E4%BB%80%E9%BA%BC%E7%B6%B2%E7%AB%99%E8%A6%81%E5%81%9A%E6%88%90-spa-ssr-%E7%9A%84%E5%84%AA%E9%BB%9E%E6%98%AF%E4%BB%80%E9%BA%BC-c926145078a4
###### tags: `網站知識` `中午分享`