# 搞懂網頁技術名詞 SSR、CSR、MPA、SPA
###### tags: `技術名詞`

## 伺服器端渲染 Server-side render ( SSR )

### HTML 由 Server 端編譯出來返回 Client 端，是傳統的渲染方式

在使用者點選了一個網址後，瀏覽器透過網路發出一個 request 給 Server ， 而 Server 透過 request 後得知你點了哪個網址，並會 response 該網址的畫面給瀏覽器，然後瀏覽器在去依照伺服器回傳來的畫面呈現給使用者

### 優點:

1. 渲染速度較快 => 不用在下載 CSS 跟 JS ，然後等待編譯才看的到畫面
2. 省電 => 編譯都在伺服器端完成
3. 有利於 SEO =>　Google 爬蟲更容易抓到網站的資訊
4. 使用者體驗較差 => 等待伺服器渲染時間較長，畫面都只會是空白的

### 缺點:

1. Server 壓力較大 => 過多的編譯有可能消耗龐大資源

### 多頁式應用程式 Muti-page Application ( MPA )

SSR 的這種開發模式又稱 MPA ，通常一個頁面搭配一個檔案，所以我們要求新畫面的時候，都會有一小段空白時間等伺服器渲染完成後傳回
若畫面空白太久對使用者的體驗較差


## 客戶端渲染 Client-side render ( CSR )

如果 SSR 是透過伺服器渲染完傳回 Client 端，那麼 CSR 就是反過來
request 發出請求後，伺服器只負責將檔案 response 到 Client 端，渲染過程全部交給 client 的瀏覽器去處理，伺服器只負責資料處理，達到前後端分離

### 優點:

1. 前後端分離，維護方便 => 渲染在 Client ， 資料處理在 Server
2. 減少 server 端的壓力
3. 頁面切換速度快 => HTML 頁面都是 Client 端自己編譯的，所以頁面切換時不需要像 SSR 等待 Server 回傳 HTML
4. 使用者體驗較好 => 不需要每次都請求頁面重新整理刷新，直接在 Client 渲染出你想要的畫面

### 缺點:

1. 首屏顯示慢 =>　明明首頁只有一點內容卻把下載了所有頁面的資源
2. 不利於 SEO => 把所有資訊都放在同一個地方，抓取資訊不容易

### 單頁式應用程式 Single-page Application ( SPA )

我們在操作的畫面只會有一個，根據需求來顯示相關內容


## 參考:

[伺服器端渲染 (SSR) & 客戶端渲染 (CSR) 對 SEO 的影響│鼠年全馬鐵人挑戰 #11](https://its-okay.medium.com/%E4%BC%BA%E6%9C%8D%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93-ssr-%E5%AE%A2%E6%88%B6%E7%AB%AF%E6%B8%B2%E6%9F%93-csr-%E5%B0%8Dseo%E7%9A%84%E5%BD%B1%E9%9F%BF-%E9%BC%A0%E5%B9%B4%E5%85%A8%E9%A6%AC%E9%90%B5%E4%BA%BA%E6%8C%91%E6%88%B0-11-c05321b57fd8)
[SSR、CSR名詞理解 & 應用場景](https://medium.com/dean-lin/ssr-csr%E5%90%8D%E8%A9%9E%E7%90%86%E8%A7%A3-%E6%87%89%E7%94%A8%E5%A0%B4%E6%99%AF-119ca6f5ecc#1a75)
[淺談 SPA、CSR、SSR、MPA、SSG 專有名詞](https://israynotarray.com/other/20210529/2519649612/)
[Day20– 前端小字典三十天【每日一字】– SPA](https://ithelp.ithome.com.tw/articles/10160709)