Warning: Prop className did not match. Server: "styles__Header-sc-1ybajh2-4 iQfFoq" Client: "styles__Header-sc-1ybajh2-4 euZlce"

[smugller]

Hi guys,

I'm new with Next.js and read a lot in last few weeks about this awesome framework! I try to implement Dark Mode on my website, but I've got an error:

Warning: Prop className did not match. Server: "styles__Header-sc-1ybajh2-4 iQfFoq" Client: "styles__Header-sc-1ybajh2-4 euZlce"

Problem:

When I load website for the first time, everything is alright. Problem start when I change website theme to dark and refresh page. It doesn't happened when theme is set to light by default. So it looks, like server render first page with default light theme, but when I click on button to switch to dark mode it's rendder only on client side, change the value in localStorage but server doesn't know about that, but it should know?

Question:
How to deal with that? I use babel-plugin-styled-components and custom _document.tsx file but it doesn't work.
Any help guys or how to deal with that in the future with other components / hooks?

CodeSandbox with source code:
https://codesandbox.io/s/test-app-lzxhh

Cheers!

[mattcarlotta]

LocalStorage is only accessible on the client-side, therefore, unless the theme is default, it’ll always be mismatched on the server. A better implementation would be to save this theme information to a database and retrieve and apply this during the initial page load.

If you need to persist this across pages/sessions, then look into using react’s Context API or utilize a 3rd party state manager like Redux. The database will then set this theme state accordingly. On that note, the theme in state will never be updated directly, instead you’ll want to update the database which in turn updates the theme value(s). This way, the server and client will always be 1:1.

[smugller]

Ok, but this should be only Client-Side feature and it’s no point to inform Server which theme user is using.

In the future I want to get local time from user web browser and set theme automatically depends if it’s evening or morning’s for example.

Later I’ll add functionality for registered users to set theme value in database, but for now I need to focus on the simplest solution.

I just want to understand basics SSR and CSR and how it works with the simplest example.

Could somebody help me add this functionality to my sample code on CodeSandbox and get rid off that error somehow?

Thanks 🙏

[smugller]

Solution: https://joshwcomeau.com/gatsby/dark-mode/