Summary
Hydration attaches event listeners and client state to server-rendered HTML without re-creating the entire DOM from scratch. Mismatches occur when server HTML differs from the client's first render (dates, random IDs, invalid HTML nesting, browser-only APIs). Know selective/partial hydration vs full client render, and how to trace hydration errors in React 19/Next.js (suppressHydrationWarning is a last resort, not a fix).
Code example
// Client attaches listeners to server HTML
import { hydrateRoot } from 'react-dom/client';
const root = hydrateRoot(document.getElementById('root'), <App />);
// Mismatch: server rendered "2024", client renders Date.now()
Key points
- Hydration attaches event listeners and client state to server-rendered HTML without re-creating the entire DOM from scratch.
- Mismatches occur when server HTML differs from the client's first render (dates, random IDs, invalid HTML nesting, browser-only APIs).
- Know selective/partial hydration vs full client render, and how to trace hydration errors in React 19/Next.js (suppressHydrationWarning is a last resort, not a fix).