upgraded our SvelteKit app and now hydration errors appear on several pages:
The common factor seems to be a random ID on a form. Before teh upgrade we didnt see warnings, or maybe they were just quieter... i wanna fix teh root cause rather than silence it. What are the usual sources of mismatches and how do you fix each one?? Detailed answers welcome, Im happy to refactor if it fixes things properly.
for user-specific values like theme or login state, make the server know them too: read a cookie on the server and render the same value. if the server truly can't know, render a neutral state first and swap after hydration, or render that component client-only (dynamic(..., { ssr: false }) in Next.js, <ClientOnly> in Nuxt).
uhh which version are you on?... reading this at 2am instead of slepeing, no regrets
dates usually mismatch because the server runs in UTC and the broswer in the users time zone, or cuz locales differ. format dates with an explicit time zone and locale, or render the date on the client only. for a single timestamp element, React supoprts suppressHydrationWarning on that element. hope that helps :)
Sign in or create an account to reply.
