What is React hydration and how does SSR work

· Category: React

Short answer

SSR generates HTML on the server. Hydration is the process where React attaches event listeners and state to that existing HTML on the client.

How it works

The server sends fully rendered markup. React then walks the DOM, compares it to its virtual tree, and wires up interactivity. If the server HTML and client tree mismatch, React warns and may re-render.

Example

// Server
const html = ReactDOMServer.renderToString(<App />);

// Client
hydrateRoot(document.getElementById('root'), <App />);

Common issues

  • Mismatches caused by timestamps, random values, or browser-only APIs during SSR.
  • Use typeof window checks or useEffect to gate client-only logic.
  • Wrap problematic subtrees in Suspense boundaries where supported.