CSR 與 SSR 是什麼？差在哪、對 SEO 與 AI 搜尋有什麼影響

先看這兩個字在講什麼

渲染（render）就是「把資料變成你看得到的畫面」。同一個頁面，這件事可以在兩個地方做：在使用者的瀏覽器裡做，或在伺服器上先做好。

CSR（Client-Side Rendering，瀏覽器端渲染）：伺服器丟給瀏覽器一份幾乎是空的 HTML，加上一包 JavaScript。瀏覽器下載完、把 JavaScript 跑起來，才去要資料、把畫面畫出來。

SSR（Server-Side Rendering，伺服器端渲染）：伺服器在送出之前就先把內容組進 HTML。瀏覽器一收到就有字可以看，JavaScript 之後才載入，負責讓頁面可以點、可以互動。

還有 SSG，以及為什麼實務上常常混著用

SSG（Static Site Generation，靜態產生）是第三種：在你部署網站的那一刻就先把 HTML 全部產好存起來，訪客來就直接給檔案。不用每次現算，所以最快也最省錢，缺點是內容要更新就得重新產一次。

實務上很少整個網站只用一種。常見的分法是：文章、商品頁、服務介紹這類「大家看到的都一樣」的頁面走 SSG 或 SSR，會員中心、購物車、後台這類「每個人看到的都不同」的頁面走 CSR。

現在主流的框架都支援逐頁選擇，不是全站二選一。跟工程師討論時，問的應該是「這一頁用哪一種」，而不是「我們網站是 CSR 還是 SSR」。

使用者感受到的差別

• 第一眼看到東西的速度：SSR 與 SSG 明顯快，因為 HTML 送到就有字。CSR 要等下載完 JavaScript 並執行完才有內容，中間是一片空白或轉圈圈
• 網路慢或手機舊的時候差更多：JavaScript 要下載也要執行，設備越差這段等待越長。SSR 幾乎不受影響
• 切換頁面的順暢度：CSR 反而比較好。第一次載入之後，之後換頁不用再跟伺服器要整份 HTML，感覺像 App
• 伺服器成本：SSG 最便宜（就是給檔案），CSR 次之，SSR 每次都要現算，流量大的時候費用最有感

對 SEO 的影響

搜尋引擎要先「抓到」你的頁面、再「理解」內容，才可能把你排進結果裡。CSR 的問題出在第二步。

Google 官方文件說明它會執行 JavaScript，所以 CSR 的內容最終讀得到。但那是分兩階段做的：先抓 HTML，之後再排進渲染佇列跑 JavaScript。這中間要等多久沒有保證，內容多、站點新的時候更明顯。

其他搜尋引擎與各種預覽爬蟲就不一定了。社群平台抓分享預覽卡（標題、描述、縮圖）的時候多半不執行 JavaScript，所以 CSR 的頁面分享出去，常常變成一張沒有標題也沒有圖的卡片。

• 要被搜尋到的內容頁：文章、商品、服務說明，走 SSR 或 SSG 最穩
• 不需要被搜尋到的頁：會員中心、後台、購物車，CSR 完全沒問題，甚至更適合
• 分享預覽卡壞掉：如果你發現貼到社群沒有標題沒有圖，很可能就是那一頁是 CSR
• 不要用「反正 Google 讀得到」說服自己：讀得到跟多快讀到是兩件事，而且讀得到的只有 Google

對 GEO 的影響（被 AI 引用的機會）

GEO（Generative Engine Optimization，生成式引擎最佳化）是最近幾年才出現的說法：以前大家優化的是「怎麼在搜尋結果排前面」，現在多了一件事，「怎麼讓 AI 在回答問題時引用到你」。

這件事對 CSR 特別不利。目前多數 AI 爬蟲抓網頁時只讀原始 HTML，不會像瀏覽器那樣把 JavaScript 跑一遍。也就是說，你的內容如果是靠 JavaScript 產生的，AI 抓到的就是一份空殼，它不知道你頁面上寫了什麼。

結果是：同樣一篇寫得很好的文章，走 SSR 的那篇有機會被 AI 引用並附上出處連結，走 CSR 的那篇則像不存在。搜尋流量本來就在往 AI 回答移動，這個差距會越來越有感。

• 內容要出現在原始 HTML 裡：這是 GEO 最基本的一條，其他技巧都建立在這之上
• 結構化資料（JSON-LD）也要在 HTML 裡：用 JavaScript 動態塞進去的，AI 爬蟲同樣讀不到
• 一頁只講清楚一件事：AI 引用的是段落而不是整站，主題散的頁面比較難被挑中
• 把問題與答案寫明白：標題就是問題、開頭就給答案，比埋在第五段好被抓
• 各家 AI 爬蟲的行為會調整：這裡講的是目前的普遍情況，實際以各服務的官方說明為準

怎麼判斷一個頁面是哪一種

不用問工程師，自己就能確認。這招也可以拿來檢查外包交付的網站：

• 看原始碼：在頁面上按右鍵選「檢視網頁原始碼」。注意不是開發者工具，是原始碼。如果裡面找得到你在畫面上看到的那些字，就是 SSR 或 SSG。如果只有一堆 script 標籤跟一個空的 div，就是 CSR
• 關掉 JavaScript 再開一次：瀏覽器設定裡可以關。關掉之後還看得到內容就是 SSR
• 貼到社群看預覽：貼進聊天室或社群草稿，看有沒有正常跑出標題與縮圖

選擇建議

• 部落格、官網、商品頁、落地頁：SSG 優先，內容會頻繁變動就用 SSR。這類頁面的存在目的就是被找到
• 後台、儀表板、會員專區：CSR。這些頁面不需要被搜尋到，而且切換要順
• 電商商品頁：一定要 SSR 或 SSG。價格與庫存會變，但被搜尋到與被 AI 引用的價值更高
• 已經做成 CSR 又不想整個重做：可以只把最需要被找到的那幾頁改成伺服器端輸出，不必全站翻新

驗收時可以問的三句話

如果你在發包或驗收網站，這三句話問下去就知道對方有沒有想過這件事：

• 「哪些頁面是伺服器端輸出的？」有想過的人會直接回答你哪幾類頁面走哪一種
• 「關掉 JavaScript 之後，文章頁還看得到內容嗎？」這題直接對應到能不能被 AI 讀到
• 「分享到社群的預覽卡是不是每一頁都正常？」順便把 Open Graph 設定一起驗掉