Hydration failed

44 阅读1分钟

Generated Image September 10, 2025 - 7_53PM.png

服务端渲染:不知道客户端渲染是什么主题,因此会根据default theme来渲染标签,可能会加上一些属性 客户端渲染:JS渲染到浏览器上时,next-themes会检测用户的系统主题设置,如果用户的系统是dark mode,它会尝试将主题设置为dark,也就会修改的class属性或data-theme属性 react会进行hydration过程,但是客户端渲染的HTML和服务端收到的HTML不匹配,抛出了hydration错误 解决方法:在HTML中加suppressHydrationWarning

image.png