Next.js 避免暗黑模式闪烁
· 阅读需 13 分钟
不知道大家有没有遇到过这样的问题,就是在 Next.js 中使用 暗黑模式时,页面会闪烁一下,这是因为 Next.js 会在服务端渲染时并不知道用户是否选择了黑暗模式(比如我一般将这个变量存在 window.localStorage
里),所以所以在用户接收到页面之前,页面会先显示一下默认的样式,然后再根据用户的选择来渲染暗黑模式的样式,这样就会导致页面闪烁。
在使用 CSS in JS 的时候这种闪烁尤为明显,例如 MUI 的官网。一般网站都会默认使用亮色主题,但我又倾向于使用暗黑模式,所以经常看到这种闪烁。我认为这真的很影响用户体验,至少我自己看得很难受。