Lazy Hydration

Lazy hydration is a performance technique used in server-side rendered and statically generated JavaScript applications where the process of attaching JavaScript event handlers and making components interactive (hydration) is deferred for off-screen or low-priority components until they are needed — either when they scroll into view, when the user interacts with them, or after a specified delay. Standard full-page hydration requires the browser to download, parse, and execute the entire JavaScript bundle before any component becomes interactive, which contributes to long Total Blocking Time and poor INP scores. By hydrating only the components visible in the viewport first and lazily hydrating the rest, applications reduce the initial JavaScript execution burden. The technique is central to Islands Architecture and is natively supported by frameworks including Astro (via client directives such as client:visible and client:idle), Qwik (which takes the concept to an extreme via resumability), and partially in Next.js via React Server Components introduced in 2023.