125
hydration
The server HTML is already there. Hydration attaches events without redrawing a different tree.
What is hydration?
Hydration is the client taking server-rendered markup and binding behaviour to it. A mismatch means the client throws away the HTML and renders its own. The user sees a flash. The bug is that the two renders were not the same function of the same data.
Why does hydration matter when vibe coding?
Models turn on SSR and then read `window` or `Date.now()` during render. The trees differ. They “fix” it by rendering null until mount, which is client-only rendering with extra steps.
How do you do hydration?
Same props on server and client. No clock, random, or locale side effects in render. If a bit must be client-only, mark that island, do not blank the page.
How do you ask a model for hydration?
Hydrate (page) without a mismatch. Do not read window, Date.now, or random during render. Server and client must emit the same markup from the same props. Client-only widgets are islands, not `if (mounted) return null` around the whole page.
What goes wrong with hydration?
Suppressing the hydration warning. The warning was the bug report.