跳至主要內容

    Hydration

    Hydration 是前端把事件與狀態掛回已存在的 HTML。做得好能兼顧首屏與互動;做不好會出現 mismatch。

    定義

    Hydration 指前端框架在瀏覽器端接手伺服器/預渲染輸出的 HTML,並把事件處理、狀態與互動能力附加上去的過程。它是 SSR/SSG/prerender 與 SPA 互動之間的橋樑。

    為什麼重要

    • 決定『內容先到、互動後到』是否順暢
    • Mismatch 會造成警告、重繪甚至跳動,影響 UX 與 CWV
    • 能讓你在不犧牲 SEO 的情況下保留 SPA 體驗

    怎麼做(實作重點)

    • 確保 SSR/SSG 輸出的初始狀態與 CSR 一致(避免隨機值/時間造成差異)
    • 避免在 render 階段讀取 window/document 造成分歧
    • 把只屬於客戶端的行為放到 useEffect 或條件渲染中處理

    相關連結

    常見問題

    關於這個詞彙的常見問答。

    回到詞彙表