如果前輩說什麼你就做什麼，長久下來你會失去判斷能力。

除非你是草創成員，不然進入一間公司後，往往都是跟著前輩訂下的規則走；大部分的前輩在交接的時候只會說要這樣做，而不會告訴你為什麼要這樣做。

不懂就問，不會就學；前輩說的也未必都是正確的，過去的設計可能存在缺陷，只是當時沒有發現；也可能因為時空背景關係，現在已經不適用了；希望大家永遠保留自己的意識，與面對未知的懷疑。

大綱

1. 如何判斷專案要使用 CSR 還是 SSR？
   • 1.1 面試官為什麼會問？
   • 1.2 面試官想從答案確認什麼？
   • 1.3 筆者提供的簡答
2. 回答問題所需具備的知識
   • 2.1 CSR - Client-Side Rendering（客戶端渲染）
   • 2.2 SSR - Server-Side Rendering（伺服器端渲染）
3. 衍伸問題
   • 3.1 在實務上有遇過什麼問題？你如何解決？

1. 如何判斷專案要使用 CSR 還是 SSR？

1.1 面試官為什麼會問？

因為履歷資訊中顯示求職者使用Nuxt.js這個 Vue.js 的應用框架；而選擇這個框架通常是為了 SSR，於是想透過這個問題確認求職者是否明白 SSR 與 CSR 的意思，以及各自的應用場景。

1.2 面試官想從答案確認什麼？

• 是否可以簡述 CSR 與 SSR 的應用場景
• 細問時可以說出各自的優缺點
• 在實務上如何發揮各自優點

1.3 筆者提供的簡答

如果是操作頻繁的的內部管理系統，我會建議使用 CSR，由 Client 負責編譯 HTML 頁面以降低 Server 端壓力；而面對需要 SEO 優化的網站，我會推薦用 SSR，因為 Client 端會直接收到由 Server 端編譯好的 HTML，利用首屏渲染快的優勢提供較好的使用者體驗。

2. 回答問題所需具備的知識

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

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

• 優點
  • 減少 Server 端的壓力
    因為 JavaScript 及 CSS 在第一次都已經發送到 Client 端，之後只需要向 Server 端取得相關頁面的 data 即可。
  • 頁面切換速度快
    因為 HTML 頁面都是 Client 端自己編譯的，所以頁面切換時不需要像 SSR 等待 Server 端回傳 HTML；而且網頁內容的改變通常都是局部的，這樣就避免了不必要的跳轉及重複渲染。
• 缺點
  • 首屏顯示慢
    明明首頁只有一點內容卻下載了所有頁面的資源。
  • SEO 較差
    因爲一開始的 HTML 頁面是空白的；儘管現在 Google 的爬蟲也會等 JavaScript 編譯好再爬，但這塊對 SEO 的實際幫助還需要時間驗證。
• 應用場景
  • 會高頻操作且不需 SEO 的網站
    像是內部管理系統（ERP 系統、訂單管理系統），如果這類型的系統採取 SSR 會造成 Server 端較大的負荷。

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

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

• 優點
  • SEO 排名更高
    因為 Google 爬蟲可以直接抓到網站的資訊。
  • 首屏渲染快
    因為不需要下載一堆 JavaScript 及 CSS ，還要等待它們編譯後才看到頁面。
  • 減少 Client 端的耗電量
    因為編譯的步驟都在 Server 端執行。
• 缺點
  • Server 端承受比較大的壓力
    由於頁面都是在 Server 端進行編譯，在高併發場景中會消耗相當大的資源。
• 應用場景
  • 低頻操作但需要 SEO 優化的網站
    像是媒體類型的網站（部落格、新聞網站、技術文件），因為文章要被搜尋到才會有流量及話題，而且大部分的時候 Client 端都在閱讀，很少有高頻操作的情境。

3. 衍伸問題

3.1 在實務上有遇過什麼問題？你如何解決？

考點：了解你在實務上是否能靈活運用

• 先簡述自己遇過的問題
  假設 Client 端的網路環境不理想又採用 CSR，那在首屏渲染的過程可能就趕走許多使用者；在這種情況下 SSR 會因為 Server 環境相對穩定而獲得較好的使用者體驗。
• 再說明解決方式
  無論是 CSR 還是 SSR 都有各自的優勢與弱點，所以我通常會讓第一個頁面用 SSR 來爭取更高的 SEO，其他操作頻率高的頁面則採用 CSR 讓使用者有良好的體驗；目前 Nuxt.js（Vue）、Next.js（React）這兩個框架都是很好的解決方案

感謝大家的閱讀，如果喜歡我的文章可以訂閱接收通知；如果有幫助到你，按Like可以讓我更有寫文的動力，我們明天見～

參考資源

1. SSR、CSR 名詞理解 & 應用場景(筆者部落格)

在許多人的幫助下，本系列文章已成功出版，除了添加新的篇章，更完善了每個案例的應對進退；如果對現在的職涯感到迷茫，也許這本書能帶給你不一樣的觀點～

天瓏書局： https://www.tenlong.com.tw/products/9786263334571

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 技術的理解，如果有理解錯誤的地方希望有大神給予指教，感恩不盡～