{
  "id": "nextjs/dynamic-import-ssr-false-client-component",
  "signature": "Error: 'ssr: false' option in dynamic() is not supported in Server Components. Use dynamic() with 'ssr: false' only in Client Components.",
  "signature_zh": "错误：dynamic() 中的 'ssr: false' 选项在服务端组件中不受支持。请仅在客户端组件中使用带有 'ssr: false' 的 dynamic()。",
  "regex": "Error: 'ssr: false' option in dynamic\\(\\) is not supported in Server Components\\. Use dynamic\\(\\) with 'ssr: false' only in Client Components\\.",
  "domain": "nextjs",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "The dynamic() import with { ssr: false } is used in a Server Component, but this option only works within Client Components because Server Components always render on the server.",
  "root_cause_type": "generic",
  "root_cause_zh": "在服务端组件中使用了带有 { ssr: false } 的 dynamic() 导入，但此选项仅在客户端组件中有效，因为服务端组件总是在服务端渲染。",
  "versions": [
    {
      "version": "Next.js 14.x",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "Next.js 15.x",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "",
      "why_fails": "The component may rely on browser-only APIs (window, document, etc.) that will crash during server-side rendering. Removing 'ssr: false' without client isolation will cause ReferenceError.",
      "fail_rate": 0.6,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "This is a build-time validation error that occurs before runtime. The framework throws it during module resolution, so try-catch cannot intercept it.",
      "fail_rate": 1.0,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "Server Components do not have access to the window object, and conditional imports in Server Components still attempt to resolve the module during server-side rendering, leading to the same error or different import failures.",
      "fail_rate": 0.8,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Move the dynamic() import to a Client Component by adding 'use client' at the top of the file. Example: 'use client'; import dynamic from 'next/dynamic'; const MyComponent = dynamic(() => import('./MyComponent'), { ssr: false });",
      "success_rate": 0.9,
      "how": "Move the dynamic() import to a Client Component by adding 'use client' at the top of the file. Example: 'use client'; import dynamic from 'next/dynamic'; const MyComponent = dynamic(() => import('./MyComponent'), { ssr: false });",
      "condition": "",
      "sources": []
    },
    {
      "action": "If you cannot convert the parent to a Client Component, create a separate wrapper Client Component that handles the dynamic import, and import that wrapper in your Server Component.",
      "success_rate": 0.88,
      "how": "If you cannot convert the parent to a Client Component, create a separate wrapper Client Component that handles the dynamic import, and import that wrapper in your Server Component.",
      "condition": "",
      "sources": []
    },
    {
      "action": "Use next/dynamic without ssr: false and instead handle browser-only code inside a useEffect with a mounted state check.",
      "success_rate": 0.75,
      "how": "Use next/dynamic without ssr: false and instead handle browser-only code inside a useEffect with a mounted state check.",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "通过在文件顶部添加 'use client' 将 dynamic() 导入移到客户端组件中。示例：'use client'; import dynamic from 'next/dynamic'; const MyComponent = dynamic(() => import('./MyComponent'), { ssr: false });",
    "如果无法将父组件转换为客户端组件，请创建一个单独的包装器客户端组件来处理 dynamic 导入，然后在服务端组件中导入该包装器。",
    "使用不带 ssr: false 的 next/dynamic，而是在 useEffect 中使用 mounted 状态检查来处理浏览器专用代码。"
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://nextjs.org/docs/app/api-reference/functions/dynamic",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.88,
  "fix_success_rate": 0.9,
  "resolvable": "true",
  "first_seen": "2024-11-01",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}