Hydration
Hydration
A mechanism that adds browser-side JavaScript interactivity to HTML generated on the server.
In Simple Terms
Hydration is the process of connecting JavaScript to HTML that was already built on the server, so that dynamic features like button clicks start working. The page appears quickly because the server builds and sends the HTML first — hydration is a separate step that happens afterward, when the browser connects the JavaScript program to that HTML. This step itself takes time to load and run the JavaScript, but combining it with server-side rendering delivers both fast display and dynamic interactivity.
Behind the Name
The term borrows its meaning from the literal sense of "hydration" — pouring water into something dry. Picture the static HTML built on the server as parched, dried-out ground. JavaScript acts like water poured onto it, bringing the page to life and making it interactive — much like dry soil soaking up water and springing back to life.
Take a Closer Look!
Hydration is the mechanism that connects JavaScript logic in the browser to static HTML that was created on the server, turning it into something you can interact with.
More specifically, the browser starts up the same components that ran on the server, matches them to the existing DOM that's already on the page, and hands control of it over to the framework.
To make websites display faster, it's common to build the page's appearance on the server first and then send it to the browser.
Even with just the initial HTML, standard browser features like page navigation already work — but advanced event handling and dynamic features from frameworks like React aren't active yet at that point.
So after the initial display, the browser loads JavaScript in the background, matches it up with what's on screen, and wires in features like button clicks.
This handoff process is what makes it possible to have both a fast initial display and the dynamic interactivity that a framework provides.