What is Hydration?

When doing SSR our pages are rendered to HTML. But HTML alone isn't sufficient to make a page interactive. For example, a page with zero browser-side JavaScript cannot be interactive (there are no JavaScript event handlers to react to user actions such as a click on a button).

To make our page interactive, in addition to render our page to HTML in Node.js, our UI framework (Vue/React/...) also loads and renders the page in the browser. (It creates an internal representation of the page, and then maps the internal representation to the DOM elements of the HTML we rendered in Node.js.)

This process is called hydration. Informally speaking: it makes our page interactive/alive/hydrated.

Further reading:

• Hydration Mismatch
• Vue Docs - Hydration
• React Docs - hydrate()