Hydration
注水（補水 / 客戶端接管）
01你是不是遇到這個 / THE SYMPTOM
我用 Next.js / SSR，頁面一打開內容先出來、但按鈕點了沒反應，要等個半秒一秒才能互動；有時 console 還跳「內容對不起來」的警告，畫面閃一下。我想知道這個「伺服器先給靜態 HTML、再讓 JS 接手變可互動」的過程叫什麼。
↑ 如果你點頭了，你要的關鍵字就是 Hydration。
02這是什麼 / DEFINITION
伺服器先送出靜態 HTML 讓畫面快速顯示，瀏覽器載入 JS 後再把事件、狀態「附加」上去，讓這份 HTML 變成可互動的 React 元件的過程。
03什麼時候用 / WHEN TO USE
查這個詞通常不是要「加」它，而是要除錯：SSR/SSG 頁面出現「按鈕沒反應」「hydration mismatch」警告、或想理解 SSR 互動延遲時。
04怎麼跟 AI 說 / HOW TO ASK
直接複製這句、貼進 Claude Code / Cursor / Copilot / ChatGPT：
我的 Next.js 頁面出現 hydration mismatch 警告、畫面閃爍，幫我找出伺服器端和客戶端渲染結果不一致的地方並修掉（例如直接用 Date.now() / localStorage / 隨機值的部分）。
05常見坑 / WATCH OUT
⚠ 最常見的 hydration mismatch 來源：伺服器和瀏覽器算出不同結果，例如時間、亂數、`window`/`localStorage`、或把不該放的標籤塞進 `<p>` 裡。別用關掉 SSR 來逃避，先找出不一致的根因。
06相關的詞 / RELATED