Next 13中使用"use client"与useState出现Hydration错误是否正常？

这种情况不属于正常现象，你提供的代码本身逻辑合规，不会触发Hydration错误，出现问题大概率是其他隐藏因素导致的。

可能的排查方向： #

• 检查页面关联的其他组件（父组件、引入的子组件）是否存在服务端渲染DOM与客户端hydrate时DOM结构不一致的情况，比如依赖客户端专属API（window/document）在服务端执行，导致渲染结果不匹配。
• 确认是否存在条件渲染逻辑依赖客户端状态，但服务端无法获取该状态，导致服务端与客户端渲染的DOM节点差异。（注：你当前代码未使用edit状态做渲染，所以大概率是其他组件的问题）
• 尝试重启Next.js开发服务器，缓存异常也可能引发这类奇怪的Hydration错误。
• 检查你的Next.js版本，部分早期App Router版本存在相关bug，建议升级到最新稳定版。

补充：在Next.js 13的App Router中，page.tsx里添加"use client"指令并使用useState是完全符合规则的写法，单纯这段代码不会导致Hydration错误。

内容的提问来源于stack exchange，提问作者cool_code