紀錄工作經驗、相關知識,解決技術相關問題。

網站相關

什麼是 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 將頁面資訊產出。

SSRCSR 最大差別

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

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

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

要說這話之前,請先將【即時性】與【費用】考量進去,第三方軟體是能解決,但是羊毛出在羊身上,【免費不即時,即時要收費】,收費通常依流量計費,講到這裡,業主就自己評估吧。

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

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

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

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

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

發表迴響