Comparison
HydrationvsResumability
Hydration
the page looks finished but clicking a button does nothing for another two seconds.
Attaching client-side behaviour — event listeners and component state — to server-rendered HTML that is already on screen. It is the price of server rendering in a component framework: the browser downloads the same component code, runs it again, and walks the existing DOM to match it up. Because it is one large synchronous chunk of work, it is the classic cause of a page that is visible long before it is interactive.
Full entry →Resumability
the page is interactive on arrival because no framework code re-ran to make it so.
An alternative to hydration where the server serialises enough state into the HTML that the client can pick up mid-execution rather than replaying the render. Event handlers are attached lazily, on the first interaction, so the startup cost is close to zero regardless of page size. The trade is a larger HTML payload and a much less common execution model, which shows up as tooling and debugging friction.
Full entry →