解决Next.js服务端渲染时出现Hydration(水合)错误

最新推荐文章于 2025-02-14 09:14:48 发布

变向加后撤

最新推荐文章于 2025-02-14 09:14:48 发布

阅读量784

点赞数 7

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_64510339/article/details/145140383

版权

错误信息（hydration-error-info.js:67 Warning: Expected server HTML to contain a matching <span> in <div>.）忽略错误依然可以正常运行，但是每次刷新后都会显示这个错误。

hydration-error-info.js:67 
 Warning: Expected server HTML to contain a matching <span> in <div>..
...........
react-dom.development.js:12507  Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
..........
Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>. 
See more info here: https://nextjs.org/docs/messages/react-hydration-error
........
react-dom.development.js:19878  Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

导致这个错误的原因是因为我们在页面上显示的数据没有使用useState

而在页面上直接使用

解决就是直接使用useState就不会报错了

 useEffect(() => {
    setUserData(user)  //使用userData代替user

    /**
    * .......
    */
  }, [userData]);

参考文章：解决Next.js服务端渲染时出现Hydration(水合)错误在Next.js服务端渲染的时候，难免会出现Hydrat - 掘金