Hydration

What it is

Hydration is the moment JavaScript takes over an interface that was already rendered on the server.

The HTML is already on the screen.

What is still missing is wiring up events, state, and behavior.

When it matters

This matters in SSR and any setup where the first paint arrives before the app fully runs in the browser.

Without understanding hydration, it is easy to look at a page and assume “everything has loaded already.”

Not always.

Common mistake

The classic mistake is treating visible HTML as the same thing as an interactive interface.

The page may look ready while:

• a button still does nothing
• state still does not match
• a component still breaks during mount

Short example

The server sends a shopping cart with the total already rendered.

The user sees the page.

But the remove-item button only works after the bundle loads and hydration finishes.

Why it helps

Understanding hydration helps separate three things people often mix together:

• visible content
• loaded JavaScript
• working interactivity

SSR improves arrival time. Hydration decides when the interface actually comes alive.