Way to "expect" a prop difference between Server / Client?

[saeho]

When the server html code does not match the rendered html code in client, Remix (correctly) shows a warning that the prop/html did not match what was rendered in the server.

But sometimes, there's just no way to get the exact HTML code in the server to match the client render.

For example, a "system" light mode is a common feature where user's theme changes from light to dark mode depending on time of the day. User's timezone and whether they selected the computer to "prefer" night mode, is hard information to get to the server for server side rendering.

Is there a way to "expect" error so the warning is silenced?

[flexdinesh]

is that a remix warning or the react hydration warning? if you're sure what you're doing is expected, you can add supressHydrationWarning={true} to the jsx element and the hydration warning will be supressed.
https://react.dev/reference/react-dom/hydrate#suppressing-unavoidable-hydration-mismatch-errors

[sergiodxa]

I answered you on Discord (🙏 try to don't duplicate so people don't answer on both places) but I will copy it here:

the error is shown by React not Remix

you can solve the light/dark mode issue by using CSS media queries instead of localStorage, or if you want to let the user pick a theme use a cookie to keep the user preference, this way you can return the cookie value from the loader and render the correct theme

you can solve the timezone issues by
1. Using your server timezone always
2. Using your server timezone on a first visit, then after the user loads the page detect the timezone and save it in a cookie, from that point use the timezone from the cookie
3. Delay showing any date to the browser

I personally would use 1 or 2, but many prefer 3, you can create a component to render dates that can use ClientOnly from Remix Utils to only render the date client-side after hydration, and server-side you can render null or something else

finally, check Epic Stack's Client Hint package https://github.com/epicweb-dev/client-hints as it was built to solve these issues

it even has a built-in solution to timezones using @epic-web/client-hints/time-zone' that will simplify implementing the second solution

[saeho]

@flexdinesh It's a Remix warning, it's warning that the server-rendered HTML code is different from what the client rendered. It's a correct warning, it's just so happens I can't make it always equal because I can't check the user's timezone or the system light/dark mode until I have access to the user's browser document object.

@sergiodxa It's not a localStorage issue. It's actually not a timezone issue either. It's a DOM API issue, something I can't access until I have access to the document DOM.

[sergiodxa]

I mentioned light/dark mode and timezone because those are on your original post, and localStorage is also a browser API like DOM.

Anyway the solution is the same, you need to delay to after hydration, e.g. on useEffect, and pick a fallback, the Client Hints package from Kent solves this without delaying it and using a fallback

[saeho]

@sergiodxa Also, yes I am using CSS media queries. It's just when the user selects "SYSTEM", I'm suppose to auto-pick the computer's current light/dark mode and I can't access that without the DOM API. Which means, Server Side Rendering can never "always" have same code as the client 100% of the time. Which makes it difficult to get rid of this warning.

[sergiodxa]

Create a cookie where you store "system" | "light" | "dark", if it's null fallback to "system", when the user picks a mode change this cookie.

Return the cookie value from the root loader, and set a class in your tag (so it's global), then in your CSS add a class for each one.

Inside each one set the correct CSS variables for your theme.

For the system one, you want to combine it with @media (prefers-color-scheme: dark).

@media (prefers-color-scheme: dark) {
  :root { /* here set dark mode colors */ }
}

@media (prefers-color-scheme: light) {
  :root { /* here set light mode colors */ 
}

.dark { /* here set dark mode colors */
.light { /* here set light mode colors */

The benefit of this is that you don't need JS anymore, the browser will pick the correct color schema for the user, but you can also use the dark and light classes to force another one, you could even force it on a section of an app.

[sergiodxa]

Or you can use Client Hints package which has a solution for color scheme too using JS to know the media query.

[saeho]

I was looking for a way to silence the error (unless it was a really critical warning) because I didn't want to use a solution like using cookies just for this. But your non-class-using css media queries solution is a pretty clever one. Thank you.

[sergiodxa]

The error can't be silenced, at least not from Remix side as the one in charge of it is React, and React has no way to silence it, you could just ignore it too, that's what I usually do, browser extensions could also cause them so it's really hard to prevent them all the time.

[jacobparis]

You can silence it for text content and attribute changes with suppressHydrationWarning https://react.dev/reference/react-dom/hydrate#suppressing-unavoidable-hydration-mismatch-errors

but the right move here is to either

• avoid requiring server-side JS to know about the theme preference by using a CSS solution
• communicate the theme preference to the server, and use a system default when that preference does not exist
• use a client hint strategy to communicate that preference at all times