React › Server-Side Rendering (SSR) & Next.js

What is hydration in the context of server side rendering, and why is it necessary?

Intermediate

Answer

Hydration is the process where React takes the already rendered HTML sent from the server and attaches the necessary JavaScript behavior to it in the browser, making buttons clickable and inputs interactive. Without hydration, the page would just be static text with no working interactivity at all.

// The server sends fully rendered HTML
// Then React 'hydrates' it in the browser, attaching event handlers
import { hydrateRoot } from 'react-dom/client';

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

Real-world example A shopping site's add to cart button appears instantly from the server rendered HTML, and becomes fully clickable only a moment later once React finishes hydrating the page in the visitor's browser.

Common follow-ups: What happens if the HTML generated on the server does not exactly match what React expects during hydration?;How long does hydration typically take on a slower device?

Static Site Generation (SSG) & Hydration;Performance (memo/useMemo)