# SSR、CSR名詞理解 & 應用場景

- 作者：林鼎淵（Dean Lin）
- 網址：https://deanlin.net/blog/202103/ssr-vs-csr/
- 發布：2021-03-18
- 主題：技術教學
- 標籤：SSR、CSR、Server Side Rendering、Client Side Re、Framework
- 摘要：當老闆或是主管問你為什麼選擇這個技術時，如果支支吾吾打不出來就遜掉了；理解為什麼該這樣做才是對技術的負責。

當老闆或是主管問你為什麼選擇這個技術時，如果支支吾吾打不出來就遜掉了；理解為什麼該這樣做才是對技術的負責。

```
CSR - Client-Side Rendering（客戶端渲染）
  ➤ 優點
  ➤ 缺點
  ➤ 應用場景
SSR - Server-Side Rendering（伺服器端渲染）
  ➤ 優點
  ➤ 缺點
  ➤ 應用場景
可以思考的問題
  ➤ 現實面遇到的狀況
  ➤ 運用框架結合 CSR 與 SSR 的優點讓網站取得雙贏

```

## CSR — Client-Side Rendering（客戶端渲染）

渲染過程全部交給 client 的瀏覽器去處理，server 不參與任何渲染。一開始的 HTML 是空白的，需要等待 JS 下載並執行後瀏覽器才會顯示畫面。

### 優點：

- **減少 server 端的壓力**：因為 JS 及 CSS 在第一次都已經發送到 client 端，之後只需要向 server 端取得相關頁面的 data 即可
- **頁面切換速度快**：因為 HTML 頁面都是 client 端自己編譯的，所以頁面切換時不需要像 SSR 等待 server 回傳 HTML；而且網頁內容的改變通常都是局部的，這樣就避免了不必要的跳轉及重複渲染。

### 缺點：

- **首屏顯示慢**：明明首頁只有一點內容卻把下載了所有頁面的資源
- SEO 較差：因一開始的 HTML 是空白的，雖然現在 Google 的爬蟲也會等 javascript 編譯好再爬，但這塊對 SEO 的實際幫助還需要時間驗證

### 應用場景：

- **會高頻操作且不需 SEO 的網站**：像是內部管理系統，如果這類型的系統採取 SSR 會造成 server 端很大的負荷。

## SSR — Server-Side Rendering（伺服器端渲染）

HTML 由 server 編譯出來返回 client 端，所以 client 看到的畫面就是最終版 HTML。

### 優點：

- **SEO 排名更高**：因為 Google 爬蟲可以直接抓到網站的資訊
- **首屏渲染快**：因為不需要下載一堆 JS 以及 CSS 執行後才看到頁面
- **減少 client 端的耗電量**：因為編譯的步驟都在 server 端執行

### 缺點：

- **server 端承受比較大的壓力**：由於頁面都是在 server 端進行編譯，在高併發場景中會消耗相當大的資源

### 應用場景：

- **低頻操作但需要 SEO 優化的網站**：像是媒體類型的網站，因為文章需要被搜尋到，我們看一篇文章也需要一點時間很少高頻的操作這個網站

## 可以思考的問題

### 現實面遇到的狀況

在 CSR 的狀況下如果某個頁面需要同時存取多個 api，假設 client 端的網速不理想，那使用者的體驗會極差；在這種情況下 SSR 會因為 server 環境相對穩定而獲得相對好的使用者體驗。

### 運用框架結合 CSR 與 SSR 的優點讓網站取得雙贏

經由上面的分析，我想大家應該已經感受到 CSR 與 SSR 可以說是性質完全相反的渲染了，所以實際應用上我們通常會讓第一個頁面用 SSR 來爭取更高的 SEO，其他的頁面則採用 CSR 的方式來操作給使用者兩好的體驗。

現有的框架： `Nuxt.js`（Vue）、`Next.js`（React）都有很好的解決方案

> 以上是我個人針對 SSR、CSR 技術的理解，如果有理解錯誤的地方希望有大神給予指教，感恩不盡～

---

關於作者：林鼎淵（Dean Lin），台灣的生成式 AI 企業內訓講師、外商資安公司軟體專家，也是生成式 AI 創新學院發起人。出版 7 本書（包含全台第一本 ChatGPT 應用專書），兩度獲得 iThome 鐵人賽佳作，累積上百場授課與顧問經驗。（https://deanlin.net/about/）
引用時請附上原文網址：https://deanlin.net/blog/202103/ssr-vs-csr/