{
  "id": "nextjs/use-cache-in-client-component",
  "signature": "Error: 'use cache' is not allowed in Client Components. Use 'use cache' only in Server Components or Server Actions.",
  "signature_zh": "错误：'use cache' 不允许在客户端组件中使用。请仅在服务端组件或服务端操作中使用 'use cache'。",
  "regex": "Error: 'use cache' is not allowed in Client Components\\. Use 'use cache' only in Server Components or Server Actions\\.",
  "domain": "nextjs",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "A component or function marked with 'use client' contains a 'use cache' directive, which is a Server Component-only feature for caching data and computations.",
  "root_cause_type": "generic",
  "root_cause_zh": "标记为 'use client' 的组件或函数包含了 'use cache' 指令，该指令是仅用于服务端组件的特性，用于缓存数据和计算。",
  "versions": [
    {
      "version": "Next.js 15.x",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 19.x",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "",
      "why_fails": "The component likely uses client-side hooks (useState, useEffect, etc.) or event handlers that require 'use client'. Removing it will cause other errors.",
      "fail_rate": 0.7,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "The 'use cache' directive is not supported anywhere in the client component tree, including nested components that are still within a client boundary.",
      "fail_rate": 0.9,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "This is a build-time or runtime validation error that cannot be caught by try-catch. The framework actively prevents 'use cache' in client components.",
      "fail_rate": 1.0,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Move the data caching logic to a Server Component and pass the result as props to the client component. Example: // Server Component (no 'use client') export default async function Page() { 'use cache'; const data = await fetchData(); return <ClientComponent data={data} />; }",
      "success_rate": 0.85,
      "how": "Move the data caching logic to a Server Component and pass the result as props to the client component. Example: // Server Component (no 'use client') export default async function Page() { 'use cache'; const data = await fetchData(); return <ClientComponent data={data} />; }",
      "condition": "",
      "sources": []
    },
    {
      "action": "If you need caching on the client side, use React's built-in cache function from 'react' instead of 'use cache'. Example: import { cache } from 'react'; const getData = cache(async () => { ... });",
      "success_rate": 0.7,
      "how": "If you need caching on the client side, use React's built-in cache function from 'react' instead of 'use cache'. Example: import { cache } from 'react'; const getData = cache(async () => { ... });",
      "condition": "",
      "sources": []
    },
    {
      "action": "Convert the entire component to a Server Component by removing 'use client' and refactoring any client-side logic into separate client sub-components or using Server Actions.",
      "success_rate": 0.8,
      "how": "Convert the entire component to a Server Component by removing 'use client' and refactoring any client-side logic into separate client sub-components or using Server Actions.",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "将数据缓存逻辑移到服务端组件中，并将结果作为 props 传递给客户端组件。示例：// 服务端组件（无 'use client'）export default async function Page() { 'use cache'; const data = await fetchData(); return <ClientComponent data={data} />; }",
    "如果需要在客户端进行缓存，请使用 React 内置的 cache 函数（来自 'react'）而不是 'use cache'。示例：import { cache } from 'react'; const getData = cache(async () => { ... });",
    "通过移除 'use client' 并将所有客户端逻辑重构到单独的客户端子组件或使用服务端操作，将整个组件转换为服务端组件。"
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://nextjs.org/docs/app/api-reference/directives/use-cache",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.85,
  "fix_success_rate": 0.85,
  "resolvable": "true",
  "first_seen": "2025-03-15",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}