{
  "id": "react/hydration-mismatch-attribute",
  "signature": "Hydration failed because the server rendered HTML didn't match the client. Specifically, attribute 'data-server-value' mismatch.",
  "signature_zh": "水合失败，因为服务器渲染的 HTML 与客户端不匹配。具体来说，属性 'data-server-value' 不匹配。",
  "regex": "Hydration failed because the server rendered HTML didn't match the client\\. Specifically, attribute '([^']+)' mismatch\\.",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "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.",
  "root_cause_type": "generic",
  "root_cause_zh": "服务器端渲染产生的属性值与客户端的初始渲染不同，通常是由于动态内容（例如时间戳、随机 ID、用户特定数据）在服务器和客户端环境之间存在差异。",
  "versions": [
    {
      "version": "React 18.2.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "Next.js 13.4.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "Remix 2.0.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "",
      "why_fails": "Suppressing the warning doesn't resolve the mismatch; the client will still re-render the element, potentially causing layout shifts or inconsistent state.",
      "fail_rate": 0.7,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "If the attribute should be dynamic (e.g., based on user preferences), hardcoding removes that functionality.",
      "fail_rate": 0.6,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "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.",
      "success_rate": 0.95,
      "how": "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.",
      "condition": "",
      "sources": []
    },
    {
      "action": "Use the 'suppressHydrationWarning' attribute only as a last resort for intentional mismatches (e.g., timestamps), but prefer making the value consistent.",
      "success_rate": 0.85,
      "how": "Use the 'suppressHydrationWarning' attribute only as a last resort for intentional mismatches (e.g., timestamps), but prefer making the value consistent.",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "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.",
    "Use the 'suppressHydrationWarning' attribute only as a last resort for intentional mismatches (e.g., timestamps), but prefer making the value consistent."
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://react.dev/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.86,
  "fix_success_rate": 0.91,
  "resolvable": "true",
  "first_seen": "2023-07-12",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}