渲染方式判定(SSR/SSG/CSR/ISR)
決定爬蟲看得到什麼
渲染方式像餐廳的出菜方式——SSG 是做好放保溫檯(快、內容固定)、SSR 是現點現做(新鮮、廚房要快)、CSR 是給客人食材自己煮(爬蟲這位客人常常不煮)。
03為什麼是現在學
渲染方式決定爬蟲「第一眼」看到多少內容。判定它是所有 JS 相關診斷的第一步:先知道自己是哪種,才知道要驗什麼。
04白話理解(對客戶簡報可直接引用)
四種:SSG(建置時生好 HTML,最穩)、SSR(請求時伺服器生 HTML,穩)、CSR(送空殼+JS,瀏覽器現場組——爬蟲要多花一輪渲染,風險最高)、ISR/混合(部分頁定期重生)。判定法:檢視原始碼(view-source)——主要內容在不在第一份 HTML 裡?在=SSR/SSG,不在=CSR。
05工具箱
- ▸view-source + 關閉 JS 瀏覽 — 最原始也最誠實的判定法
- ▸GSC URL 檢查的「已轉譯 HTML」 — Google 渲染後實際看到什麼
06怎麼做 · SOP 2 步(每步標產出物)
- 1對每種頁型做 view-source 判定→ 頁型×渲染方式表
- 2CSR 頁型列為高風險,進 t10 驗證→ 風險清單
07場景應用(實戰經驗)
- ◆行銷團隊買的漂亮模板是純 CSR SPA——內容再好,第一份 HTML 是空的。重要內容頁改走 SSG/SSR 是根治,預算不夠時至少首頁與服務頁要。
08⚠️ 常見誤區
- ✕用「Google 現在能渲染 JS」安慰自己——能渲染不等於即時渲染、不等於每次都成功。
口訣
「view-source 見真章:第一份 HTML 有沒有內容。」
10里程碑 · 完成標準(可驗證)
- ☐每頁型的渲染方式已判定
- ☐重要頁型非純 CSR
學習者勾自己的進度;顧問勾客戶專案的交付——同一份標準,兩種用法。
12檢核方式與依據出處
程式自動判定:輸入網址,掃描引擎自己爬、自己打 API、自己判定。
依據等級決定計分權重(🟢×3/🔵×2/⚠️×1)——權重量的是「依據有多硬」, 不是「我們覺得多重要」。查無權威文件的判準,誠實標「業界慣例」。