What is Hydration?

When doing SSR your page is rendered to HTML. But HTML alone isn't sufficient to make the page interactive.

A page without any client-side JavaScript cannot be interactive: there isn't any JavaScript event handler to react to a user action, such as a click on a button.

In order to make the components of a page interactive, the UI framework (Vue/React/...) loads and renders the page's components also on the client-side.

The UI framework creates an internal representation of page's component tree, and maps that internal representation to the DOM tree.

This process is called hydration. Informally speaking: it brings the page's interactivity alive.

See also