What is Hydration?
The short answer
Hydration is the step where JavaScript attaches to server-rendered HTML in the browser, turning a static-looking page into an interactive one.
Hydration, explained
Until hydration finishes, buttons may look ready but not respond. Sending less JavaScript, or hydrating only interactive islands, shortens that gap.
Questions people ask about Hydration
What is Hydration?
Hydration is the step where JavaScript attaches to server-rendered HTML in the browser, turning a static-looking page into an interactive one.
Related terms
Server-side rendering builds a page's HTML on the server for each request, so the visitor and search engines receive readable content immediately.
ReactReact is a JavaScript library for building user interfaces from reusable components that update automatically when their data changes.
Interaction to Next PaintInteraction to Next Paint measures how quickly a page visibly responds after a tap, click or key press, across the whole visit; good is 200 milliseconds or less.
Islands architectureIslands architecture renders a page as static HTML and hydrates only the few interactive parts, the islands, instead of the whole page.
Part of the Web Encyclopedia by Apex Flow Digital. Definitions are general knowledge, kept current, with no invented statistics.