-
Notifications
You must be signed in to change notification settings - Fork 100
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Errors with SSR on Next.js #55
Comments
Yea I've got the same problem. It looks like you changed the className only on client side when press the Dark Mode Toggle button. When you change from Light Theme to Dark Theme and refresh the page, the className of client it's different from server that's why the data which is generated by server is different and inconsistent with client. Idk how to deal with that, anyone have a solution ? |
I didn't find a solution, even with babel plugin, and styled components example. :( The only solution I found to use dark mode with Next SSG without store any data on my server, was this one using CSS Variables by @hangindev (thank you) I hope it helps someone :) |
I found a little bit better explained tutorial about this problem. CSS Variables is the only and best way to do this. If you understand the problem about CSR / SSR inconsistent data, then better for you, because you start using CSS Variables which are awesome. Here is explained more about SSR Dark Mode -> https://joshwcomeau.com/gatsby/dark-mode/ |
I found that using a dynamic import with no SSR for components that rely on dark mode state for rendering works. For example, I have a I import the // Navbar.tsx
const ThemeButton = dynamic(
(() =>
import('./ThemeButton').then(({ ThemeButton }) => ThemeButton)) as any,
{ ssr: false }
) as any; and then I normally use Now |
Sometimes, the value on the server doesn't match the one on the client (when doing SSR).
I did include
noflash.js
.The text was updated successfully, but these errors were encountered: