ssr-hydration-mismatch
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.