Next.js error on first load

[rfoel]

From the version v1.1.3, users may get the following error:

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

This happens because after the version v1.1.2, the first client render will return the users preffered color scheme, but on the server side render it will return no-preference, thus causing this mismatch from the content if it depends on the response from the hook.

I personally do not use Next.js nor other SSR framework, and I am not really sure how to handle such error. If anyone has an anwser please contribute!

[greg-schrammel]

Chakra handles that with a cookie docs here

even next-theme has some issues like that https://github.com/pacocoursey/next-themes#useTheme

a common trick is to check if the component is mounted before rendering

const [isMounted, setIsMounted] = useState(false)
useEffect(() => {
  setIsMounted(true)
}, [])
if (isMounted) // use the preferred color schema value

I was testing in a nextjs project when introduced this issue but the specific component was not server rendered 🤦‍♂️

[greg-schrammel]

in my opinion a solution for that is not in the scope of this project :)

[greg-schrammel]

https://twitter.com/dai_shi/status/1625308527295332352

[patrik-csak]

really helpful stuff. thanks, @greg-schrammel