Hydration

Hydration is the process by which a JavaScript framework takes over a server-rendered or statically generated HTML page in the browser, attaching event listeners and making it interactive. Until hydration completes, the page may look ready but not respond to user input, which can hurt [Interaction to Next Paint (INP)](/glossary/inp) scores. Excessive JavaScript bundles slow hydration down, making it a common performance bottleneck on modern JavaScript-heavy sites. Techniques like partial hydration and lazy hydration load only the components that need interactivity, reducing the cost.