What is Hydration?

When doing SSR our pages are rendered to HTML. But HTML alone is not 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 view 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:

Edit this page