Hydration
What does hydrating mean in React?
Hydration is the process by which React takes control of server-generated HTML. Instead of recreating the DOM, it attaches event listeners to the existing HTML — the user sees content immediately while React makes it interactive.
The SSR + hydration flow
Server → generates static HTML the browser shows instantly. Client → downloads the JS and React calls hydrateRoot instead of createRoot. React walks the existing HTML, compares it with what it would generate, and attaches handlers — without repainting the DOM if everything matches.
Hydration mismatch
If the server HTML doesn't match what React would render on the client (e.g. a new Date(), a localStorage value, or a random number), React warns and rebuilds that subtree from scratch. The fix is to defer that content to a useEffect or mark the node with suppressHydrationWarning.
Common pitfalls
- 01In Next.js App Router, Server Components are not hydrated — only Client Components ('use client') need hydration.
- 02suppressHydrationWarning only suppresses the warning on the marked node, it doesn't resolve the actual mismatch. Use it only for intentionally dynamic content (timestamps, ads).
- 03A hydration mismatch can cause a visual flash if React has to reconstruct part of the DOM on the client.