# Error: 'use cache' is not allowed in Client Components. Use 'use cache' only in Server Components or Server Actions.

- **ID:** `nextjs/use-cache-in-client-component`
- **Domain:** nextjs
- **Category:** runtime_error
- **Verification:** ai_generated
- **Fix Rate:** 85%

## 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.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| Next.js 15.x | active | — | — |
| React 19.x | active | — | — |

## Workarounds

1. **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} />; }** (85% success)
   ```
   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} />; }
   ```
2. **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 () => { ... });** (70% success)
   ```
   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 () => { ... });
   ```
3. **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.** (80% success)
   ```
   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.
   ```

## Dead Ends

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