Hydration
Hydration 是前端把事件與狀態掛回已存在的 HTML。做得好能兼顧首屏與互動;做不好會出現 mismatch。
定義
Hydration 指前端框架在瀏覽器端接手伺服器/預渲染輸出的 HTML,並把事件處理、狀態與互動能力附加上去的過程。它是 SSR/SSG/prerender 與 SPA 互動之間的橋樑。
為什麼重要
- 決定『內容先到、互動後到』是否順暢
- Mismatch 會造成警告、重繪甚至跳動,影響 UX 與 CWV
- 能讓你在不犧牲 SEO 的情況下保留 SPA 體驗
怎麼做(實作重點)
- 確保 SSR/SSG 輸出的初始狀態與 CSR 一致(避免隨機值/時間造成差異)
- 避免在 render 階段讀取 window/document 造成分歧
- 把只屬於客戶端的行為放到 useEffect 或條件渲染中處理
相關連結
常見問題
關於這個詞彙的常見問答。