# 错误：'use cache' 不允许在客户端组件中使用。请仅在服务端组件或服务端操作中使用 'use cache'。

- **ID:** `nextjs/use-cache-in-client-component`
- **领域:** nextjs
- **类别:** runtime_error
- **验证级别:** ai_generated
- **修复率:** 85%

## 根因

标记为 'use client' 的组件或函数包含了 'use cache' 指令，该指令是仅用于服务端组件的特性，用于缓存数据和计算。

## 版本兼容性

| 版本 | 状态 | 引入 | 弃用 |
|------|------|------|------|
| Next.js 15.x | active | — | — |
| React 19.x | active | — | — |

## 解决方案

1. ```
   将数据缓存逻辑移到服务端组件中，并将结果作为 props 传递给客户端组件。示例：// 服务端组件（无 'use client'）export default async function Page() { 'use cache'; const data = await fetchData(); return <ClientComponent data={data} />; }
   ```
2. ```
   如果需要在客户端进行缓存，请使用 React 内置的 cache 函数（来自 'react'）而不是 'use cache'。示例：import { cache } from 'react'; const getData = cache(async () => { ... });
   ```
3. ```
   通过移除 'use client' 并将所有客户端逻辑重构到单独的客户端子组件或使用服务端操作，将整个组件转换为服务端组件。
   ```

## 无效尝试

- **** — The component likely uses client-side hooks (useState, useEffect, etc.) or event handlers that require 'use client'. Removing it will cause other errors. (70% 失败率)
- **** — The 'use cache' directive is not supported anywhere in the client component tree, including nested components that are still within a client boundary. (90% 失败率)
- **** — 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. (100% 失败率)