Comparison
HydrationvsHydration mismatch
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 →Hydration mismatch
the console warns that the server HTML did not match, and the text flickers to something else on load.
The client render producing different output from the server render, usually because the component read something that only exists in one of the two places: the current time, a random value, `window`, or a user's locale. The framework has to discard its assumptions and re-render, which throws away the benefit of server rendering for that subtree. Treat every mismatch warning as a real bug, because the ones that do not warn are the ones that show the wrong content.
Full entry →