解决 Hydration failed 错误

1. 发现问题

浏览我创建的膳食网站时，突然发现了如下问题。

啊……这种问题让人无法忍受……

点击进去发现是 Hydration failed 的内容。

简单来说，就是服务器渲染的页面和客户端显示的页面不同。

原因多种多样。

2. 官方文档

Nextjs 官方文档指出 hydration error 的原因如下：

1. 错误的 HTML 标签使用

   1. <p> 标签内嵌 <p> 标签

   2. <p> 标签内嵌 <div> 标签

   3. <p> 标签内嵌 <ul> 标签或 <ol> 标签

2. 使用类似 typeof window !== 'undefined' 的逻辑

3. 在渲染逻辑中使用 window 或 localStorage 这样的浏览器 API

4. 在渲染逻辑中使用 Date() 这样的时间依赖 API

5. 修改 HTML 的浏览器扩展程序

6. 错误的 CSS in JS 库

7. 如 Cloudflare 自动缩小一样错误配置修改 HTML 响应的 Edge/CDN

但无论怎么看我都没有符合这些。

于是我进行了从头到尾的调试。

3. 调试过程

逐行注释代码并保存，以寻找是哪个部分引发了错误。

哦，原来在开发环境中开发是为了这个。

在寻找错误时发现 Lunch 组件发生了错误……

明白了……

所以进去 Lunch 中再逐一注释。

结果发现奇怪的是 input 标签是 hydration failed 的原因。

尝试了多种方法，发现所有隐藏元素的 className，如 scale-0, opacity-0 等都会引发错误！

想要换新又觉得不满意也麻烦。

4. 解决方案

这种没用的错误就无视是答案。

真是不值一提却喧闹不休。

给相关元素添加 suppressHydrationWarning 属性。

这样做了就不会报错了。

5. 后记

因为没有与我相同的案例所以摸索了很久。

自学编程有时连简单的问题都会走很多弯路。

希望这篇文章能有一点帮助。