{
  "id": "react/hydration-error-undefined",
  "signature": "Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching <div> in <div>.",
  "signature_zh": "水合失败，因为初始 UI 与服务器渲染的内容不匹配。警告：期望服务器 HTML 在 <div> 中包含匹配的 <div>。",
  "regex": "Hydration failed because the initial UI does not match what was rendered on the server",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "Server-rendered HTML structure differs from client's first render, often due to browser-specific APIs (e.g., localStorage, window) causing different output on client vs server.",
  "root_cause_type": "generic",
  "root_cause_zh": "服务器渲染的 HTML 结构与客户端首次渲染的结构不同，通常是由于浏览器特定的 API（如 localStorage、window）导致客户端和服务器输出不一致。",
  "versions": [
    {
      "version": "react-dom@18.2.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "next@14.0.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "react@18.2.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "Adding suppressHydrationWarning prop to root element",
      "why_fails": "This only suppresses the warning, doesn't fix the underlying mismatch. The UI may still flash or break.",
      "fail_rate": 0.6,
      "condition": "",
      "sources": []
    },
    {
      "action": "Using useEffect to set state after mount without conditional rendering",
      "why_fails": "Doesn't prevent the initial mismatch during hydration; only fixes subsequent updates.",
      "fail_rate": 0.5,
      "condition": "",
      "sources": []
    },
    {
      "action": "Disabling SSR entirely for the component",
      "why_fails": "Overly aggressive; loses SSR benefits and may cause layout shift.",
      "fail_rate": 0.4,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Use dynamic import with { ssr: false } in Next.js for components that rely on browser APIs: `const MyComponent = dynamic(() => import('./MyComponent'), { ssr: false })`",
      "success_rate": 0.9,
      "how": "Use dynamic import with { ssr: false } in Next.js for components that rely on browser APIs: `const MyComponent = dynamic(() => import('./MyComponent'), { ssr: false })`",
      "condition": "",
      "sources": []
    },
    {
      "action": "Ensure client and server render the same markup by checking for browser environment before rendering: `if (typeof window === 'undefined') return null;` or using `useEffect` to set state after mount with a loading state.",
      "success_rate": 0.85,
      "how": "Ensure client and server render the same markup by checking for browser environment before rendering: `if (typeof window === 'undefined') return null;` or using `useEffect` to set state after mount with a loading state.",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "Use dynamic import with { ssr: false } in Next.js for components that rely on browser APIs: `const MyComponent = dynamic(() => import('./MyComponent'), { ssr: false })`",
    "Ensure client and server render the same markup by checking for browser environment before rendering: `if (typeof window === 'undefined') return null;` or using `useEffect` to set state after mount with a loading state."
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://reactjs.org/docs/hydration.html",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.85,
  "fix_success_rate": 0.8,
  "resolvable": "true",
  "first_seen": "2023-03-20",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}