什麼是 SSR , CSR 架構? 差別在哪?

SSR 架構

SSR 原英文 Server-Side Rendering，像是還沒有前後端分離的 PHP , ASP.net 都是走 SSR 架構。

當 User 進入網站時，會向 Server 端發送請求，當 Server 收到請求時，依據請求的內容，將網頁 HTML 完整的產生後，整包傳遞給 Client 端。

而 Client 瀏覽器收到完整的 HTML 後資料後，會開始解析，並載入 HTML 用到的 CSS , JS , Image，這個過程我們稱之為渲染。

整個網頁所有的基本內容，在 Server 已經產生完畢，到 Client 即便不執行 CSS , JS 也不請求 image，你仍然可以看到網頁的基本內容。

CSR 架構

CSR 英文為 Client-Side-Rendering，也是目前 React 預設採用的架構。

與 SSR 不同，當 User 進入網站時，向 Server 端發送請求，當 Server 收到請求時，只會將整包 JS 先傳給 Client 端，當 Client 收到時，因為還沒執行幾希與渲染，所以在一開始，HTML 的頁面大多是空的，沒有相關資料，等到瀏覽器炫覽階段，開始執行 JS ，才會使用 JS 將頁面資訊產出。

SSR 與 CSR 最大差別

大部分文章寫得 SSR 與 CSR 的差別，都是寫 CSR 是前後端分離，比較好找 Bug，後續維護比較容易。

以上講得沒錯，但用商用角度來看，最大差別就在於你的網站，有沒有需要【能即時被搜尋引擎抓取、分享】，要知道搜大多尋引擎的抓取，是不執行 CSS 、JS的，在搜尋引擎的眼裡，要爬龐大的資料量，當然沒必要爬整頁就不爬，再說了，網頁以前都是 SSR 架構，重要資訊都寫在 HTML head 中的 meta 裡，CSR 因為一開始是空白頁面，搜尋引擎不執行 JS，自然被視為是空白頁，如下圖:

第三方的套件的解決方案

看到這邊有人會說：CSR 外加第三方的套件，還是可以解決搜尋與 SEO 的問題。

要說這話之前，我們需要請先將【即時性】與【費用】列入考量條件，在去看看是否合理，第三方軟體確實是能解決，但是羊毛出在羊身上，【免費不即時，即時要收費】，收費通常依流量計費，講到這裡，業主就自己評估吧。

如何選擇要使用 SSR 還是 CSR ?

講功能，兩著都能做，要如何選擇，還是得從上面說的最大差別 【被搜尋的即時性】 來講，以下列幾個條件方便你做評估：

• 需要發新聞稿，想發佈的那一刻，才在網站上公開訊息，並且能馬上被搜尋、分享
• 我想要可以分享到各個社群平台、聊天軟體
• 我有文章要發佈，要能被搜尋到
• 我要打廣告，讓用戶透過搜尋引擎找我

以上四個，符合任何一項，請選用 SSR。

四項都沒有的，SSR , CSR 就看你心情與技術的掌握度了，畢竟許多單位還是會有接回來自己維護的考量。