技術名詞

CSR、SSR、SSG:你的網站畫面是誰畫的、什麼時候畫的?三種生成方式,決定你的 SEO、速度與成本

2026.07.13 · 80 次瀏覽
CSR、SSR、SSG:你的網站畫面是誰畫的、什麼時候畫的?三種生成方式,決定你的 SEO、速度與成本

用餐廳的三種出餐方式,講給看提案的老闆聽

分享:

場景開場 + 為什麼一起講

你請廠商做網站,對方在提案裡寫「這個頁面用 SSR、部落格用 SSG、後台用 CSR」,你點頭如搗蒜,其實一個字都沒懂。這三個詞(CSR、SSR、SSG)講的是同一件事的三種做法:你的網站畫面,到底是「誰畫的」、又是「什麼時候畫的」。這件事聽起來很技術,卻直接決定你的網站在 Google 搜尋、在 AI 答案裡看不看得到、開起來快不快、以及主機每月要繳多少錢。所以要一起講——因為選錯,SEO 和速度會一起被拖下水。用一家餐廳的三種出餐方式,就能講明白。

CSR:客戶端渲染——「食材端上桌,你自己在座位上現做」

一句話:畫面由使用者的瀏覽器現場組出來。

類比:餐廳只給你食材和爐具,你坐下來自己煮。第一次上菜很慢(要等瀏覽器下載一大包程式再自己畫),但之後你要換菜色(切換頁面)很快,因為爐具已經在桌上。

例子:想像你是補習班,做一個「學生登入後看成績、課表」的後台。這種登入後、內容高度互動、又不需要被 Google 收錄的頁面,用 CSR 很合適——反正搜尋引擎本來也不該看到學生成績。

SSR:伺服器端渲染——「廚房現點現做,整盤端上桌」

一句話:每次有人來看,伺服器當場把完整畫面組好再送出去。

類比:你點餐,廚房現做一整盤端到你面前。你一坐下就看到完整的菜(首屏快、內容完整),代價是廚房每一單都要現做(伺服器每次請求都要算,主機負擔較高)。

例子:你是電商,商品頁價格、庫存隨時變,又非常需要被 Google 收錄。SSR 讓 Google 爬蟲一來就拿到完整內容,同時價格永遠是最新的。

SSG:靜態網站生成——「中央廚房預先做好便當,直接拿了就走」

一句話:畫面在「建置網站的時候」就先做好存成檔案,訪客來直接拿現成的。

類比:中央廚房前一晚把便當全做好,客人來直接領——最快、最省(不用現做),但菜色是固定的,要換內容得重做一批便當(重新 build)。

例子:你的補習班「關於我們、師資介紹、部落格文章」這種不常變的頁面,用 SSG 幾乎零延遲、主機超便宜,而且對 SEOLCP(最大內容繪製)最友善。

三者之間的關係(概念圖)

想像一條「畫面在什麼時候被畫出來」的時間軸:SSG 在最左邊(建置時就畫好)、SSR 在中間(每次請求當下畫)、CSR 在最右邊(送到瀏覽器才畫)。越靠左越快、越省、對 SEO 越友善,但越不即時;越靠右越即時、越互動,但首屏越慢、SEO 越吃力。實務上一個網站常常「混用」:部落格用 SSG、商品頁用 SSR、會員後台用 CSR——用對地方,而不是全站一種。

對客戶決策的具體影響

  • SEO 與 AI 可見度:純 CSR 的頁面,搜尋引擎與 AI 爬蟲可能抓到一片空白。要被搜尋、被 AI 引用的頁面,優先 SSR 或 SSG。
  • 速度與轉換:首屏速度(LCP)直接影響跳出率與轉換。行銷頁、落地頁選 SSG/SSR,別讓訪客等瀏覽器現畫。
  • 主機成本:SSG 幾乎可放 CDN、成本極低;SSR 每次請求都要算,流量大時主機費用明顯較高。

該問廠商的 5 個問題

  • 我這個頁面需要被 Google 和 AI 搜到嗎?如果要,你打算用 SSR 還是 SSG?
  • 哪些頁面你會用 CSR?為什麼這些頁面不需要被搜尋收錄?
  • 如果用 SSR,我的主機成本大概是多少?流量成長會怎麼變?
  • 如果用 SSG,內容更新後多久會反映到線上?需要重新 build 嗎?
  • 你會不會混用?我的網站不同頁面能不能用不同做法?

常見問題 FAQ

我怎麼知道自己的網站現在是哪一種?

簡單測法:在頁面上按右鍵「檢視原始碼」,如果原始碼裡就有你看到的文字內容,多半是 SSR/SSG;如果原始碼幾乎空白、只有一堆 script,那就是 CSR。

純 CSR 的網站是不是一定做不好 SEO?

不是一定,但比較吃力。現代 Google 能執行部分 JavaScript,但抓取慢、易漏,AI 爬蟲更常只看原始 HTML。要吃搜尋與 AI 流量的頁面,別賭 CSR。

那我全站都用 SSG 最好嗎?

不一定。SSG 最快最省,但內容一變就要重新 build,對「隨時變動」(如即時庫存、個人化)不合適。重點是「用對地方」,不是全站一種。

這會影響報價嗎?

會。SSR 的主機與架構成本通常高於 SSG,CSR 的前端工時可能較多。搞懂這三個詞,你比價時才知道對方的報價差在哪。

行動呼籲

不確定你的網站哪些頁面該用哪一種?預約 30 分鐘免費技術諮詢,我們幫你把「哪頁 SSG、哪頁 SSR、哪頁 CSR」畫成一張表,讓你的 SEO 與速度都不吃虧:

分享: