react runtime_error ai_generated true

水合失败，因为服务器渲染的 HTML 与客户端不匹配。具体来说，属性 'data-server-value' 不匹配。

Hydration failed because the server rendered HTML didn't match the client. Specifically, attribute 'data-server-value' mismatch.

ID: react/hydration-mismatch-attribute

其他格式: JSON · Markdown 中文 · English
91%修复率
86%置信度
1证据数
2023-07-12首次发现

版本兼容性

版本状态引入弃用备注
React 18.2.0 active — — —
Next.js 13.4.0 active — — —
Remix 2.0.0 active — — —

根因分析

服务器端渲染产生的属性值与客户端的初始渲染不同，通常是由于动态内容（例如时间戳、随机 ID、用户特定数据）在服务器和客户端环境之间存在差异。

English

Server-side rendering produces different attribute values than the client's initial render, often due to dynamic content (e.g., timestamps, random IDs, user-specific data) that differs between server and client environments.

generic

官方文档

https://react.dev/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html

解决方案

  1. Ensure the attribute value is deterministic between server and client. For dynamic values, use useEffect to set them after hydration, or use a client-only component wrapper.
  2. Use the 'suppressHydrationWarning' attribute only as a last resort for intentional mismatches (e.g., timestamps), but prefer making the value consistent.

无效尝试

常见但无效的做法:

  1. 70% 失败

    Suppressing the warning doesn't resolve the mismatch; the client will still re-render the element, potentially causing layout shifts or inconsistent state.

  2. 60% 失败

    If the attribute should be dynamic (e.g., based on user preferences), hardcoding removes that functionality.