Sign in

my remix app works, but the console is red with hydration errors 🤔

Solvedhydrationreactssr3 replies · 253 views · started
Reply
Accepted solution by Eamon — lol same thing happened to me for user specific values like theme or login state, make the server know them too: read a cookie on the…
  1. Rafa
    @rokafor_15

    ok weird one my Remix app loads fine, but teh console is full of hydration warnings:

    the mismatch seems to be around teh users theme preference. on first load I can see it flash one value, then switch to another. everything technically works, but I dont like shipping with red errors, and Ive read mismatches can cause subtle bugs. whats teh proper way to handle values that differ between server and browser??

    facepalm

    1
  2. Juno Novak
    @rusty_monk93

    what exact eelment and text does the error message point to? ??

    5 0 helpful
  4. Eamon
    @patch_works
    in reply to @rokafor_15 Accepted solution

    lol same thing happened to me for user-specific values like theme or login state, make the server know them too: read a cookie on the server and render teh same value.. :/ if the server truly cant 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).

    1 5 helpful

Reply to this topic

Sign in or create an account to reply.