ssr-hydration-mismatch

Installation
SKILL.md

SSR hydration mismatch

Server-side rendering only pays off if the client can hydrate the server's HTML — attach event handlers to the existing DOM without rebuilding it. The moment the client's first render disagrees with what the server sent, the framework throws out the server tree and re-renders on the client, and you lose the SSR benefit you paid for (plus a visible flash and, on React 18+, a recoverable error that is easy to miss in production — item 5). The triggers are almost all forms of one thing: the first render is not deterministic across the server/client boundary — it reads the clock, a random value, the timezone, the locale, or window.

For first-render router/query-param readiness (params empty until hydration), use deeplink-hydration. Timezone/locale-dependent text is one trigger here; its fix (serialize a stable instant, render in a fixed zone) lives in datetime-correctness.

Checklist (lead with the trap; details in references/)

triggers-and-containment

Installs
1
GitHub Stars
1
First Seen
3 days ago
ssr-hydration-mismatch — voidmatcha/frontend-niche-skills