Hydration

Hydration

Hydration is the process of attaching React’s event listeners and internal state to HTML that was already rendered by a server.

It is the crucial bridge between Server-Side Rendering (SSR) and a fully interactive Client-Side React application.

The Problem SSR Creates

In a pure Client-Side Rendering (CSR) app, the browser starts with a blank <div id="root">. React builds the UI from scratch and attaches event listeners simultaneously.

In Server-Side Rendering (e.g., using Next.js), the server executes the React components, generates the final HTML string, and sends it to the browser.

The user receives a fully formed HTML page immediately. They see the buttons, the text, and the layout. However, this HTML is “dry” or “dead.” It is just plain HTML. If the user clicks a <button> that has an onClick handler defined in React, nothing will happen because the React JavaScript hasn’t executed yet.

The Hydration Process

To bring this “dead” HTML to life, React must perform hydration.

1. The browser downloads the React JavaScript bundle in the background while the user looks at the server-rendered HTML.
2. Once the JS is loaded, instead of using createRoot (which blows away existing HTML), you use hydrateRoot.
3. React quickly traverses the existing DOM tree. It compares the physical DOM nodes with its Virtual DOM expectations.
4. It does not re-render the HTML. Instead, it attaches event listeners (like onClick) and binds state to the existing HTML elements.
5. The page is now “hydrated” (alive and interactive).

import { hydrateRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');

// hydrateRoot tells React: "Don't build this from scratch. 
// Just attach yourself to the HTML that's already there."
hydrateRoot(container, <App />);

Hydration Mismatches

Hydration relies on a strict rule: The HTML generated by the server must be exactly identical to the HTML expected by the client on the first render.

If the server renders <p>Hello</p> but the client’s first render expects <p>Goodbye</p>, a Hydration Mismatch Error occurs.

When this happens, React throws away the server HTML and aggressively re-renders the entire tree from scratch, completely ruining the performance benefits of SSR.

Common causes of hydration mismatches:

1. Using window or document during the initial render (these don’t exist on the server).
2. Using Date.now() or Math.random() directly in the JSX.
3. Invalid HTML nesting (e.g., a <div> inside a <p>), which the browser attempts to auto-correct before React hydrates it.

Interview Questions

Q: Is hydration slower than Client-Side Rendering (CSR)?
A: Hydration is faster for the perceived load time (TTFB), because the user sees the server-rendered HTML instantly. However, hydration can delay the Time to Interactive (TTI), because the browser still has to download the massive JS bundle and then walk the DOM tree to attach event listeners before the buttons actually work.