The cost of hydration
Server rendered HTML paints fast, but the page is not interactive until hydration attaches event listeners and rebuilds component state on the client. Hydrating the whole page at once can block the main thread and delay interactivity.
- Hydration walks the tree to reattach React to existing DOM
- A large tree means a long, blocking hydration pass
- The user sees content but cannot interact yet
Deferring the work
Lazy hydration hydrates parts of the page only when needed, spreading or avoiding the cost.
- On visible, hydrate a section when it scrolls into view
- On interaction, hydrate when the user clicks or focuses it
- On idle, hydrate during browser idle time
- Selective and streaming hydration let React prioritize and interleave hydration with other work
Beyond lazy hydration
Architectures like islands ship interactivity only for the interactive parts and leave static content as plain HTML, taking the idea further so most of the page never hydrates at all.
Hydration timing
Key idea
Lazy hydration defers attaching JavaScript to server HTML until a section is visible, interacted with, or the browser is idle, spreading the cost so the page becomes interactive without one big blocking pass.