Hydration 與內容閃現
CSR 遲到的內容常被略過
Hydration 閃現像店員換班的空窗——客人推門的瞬間剛好沒人站櫃台，他不會等第二個店員跑出來，掉頭就走。
03為什麼是現在學
CSR/hydration 遲到的內容有兩筆帳：爬蟲可能在內容出現前就收工（收錄不完整），使用者看到閃跳（CLS 變差、體驗掉）。
04白話理解（對客戶簡報可直接引用）
Hydration＝伺服器先送靜態畫面、JS 到位後「接管」頁面。要注意的病：接管時內容跳動（版面位移）、關鍵內容等 JS 才長出來（爬蟲風險）、hydration 失敗整頁死掉。原則：關鍵內容放第一份 HTML，JS 只做增強（progressive enhancement）。
05工具箱
- ▸慢速網路模擬（DevTools throttling） — 肉眼看閃現與跳動
- ▸CLS 量測（見 t16） — 跳動的量化證據
06怎麼做 · SOP 2 步（每步標產出物）
- 1節流模擬載入，記錄哪些內容是「後來才出現」→ 遲到內容清單
- 2關鍵內容移入首份 HTML；佔位空間預留（防跳動）→ 修復紀錄
07場景應用（實戰經驗）
- ◆價格數字用 JS 從 API 撈——爬蟲快照常常拿到「NT$--」。價格這種關鍵事實要在 HTML 裡。
08⚠️ 常見誤區
- ✕skeleton 畫面做得太像內容——使用者以為載完了開始點，結果整片重排。
口訣
「關鍵內容坐頭班車，JS 只是加掛車廂。」
10里程碑 · 完成標準（可驗證）
- ☐關鍵內容在首份 HTML
- ☐無明顯 hydration 跳動
學習者勾自己的進度；顧問勾客戶專案的交付——同一份標準，兩種用法。
12檢核方式與依據出處
半自動：程式抓資料或客戶填表，再由系統／顧問判讀。
依據等級決定計分權重（🟢×3／🔵×2／⚠️×1）——權重量的是「依據有多硬」， 不是「我們覺得多重要」。查無權威文件的判準，誠實標「業界慣例」。