nextjs runtime_error ai_generated true

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

Also available as: JSON · Markdown · 中文
85%Fix Rate
85%Confidence
1Evidence
2025-03-15First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
Next.js 15.x active — — —
React 19.x active — — —

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.

generic

中文

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

Official Documentation

https://nextjs.org/docs/app/api-reference/directives/use-cache

Workarounds

  1. 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} />; } 
    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. 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 () => { ... }); 
    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. 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. 
    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.

中文步骤

  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' 并将所有客户端逻辑重构到单独的客户端子组件或使用服务端操作，将整个组件转换为服务端组件。

Dead Ends

Common approaches that don't work:

  1. 70% fail

    The component likely uses client-side hooks (useState, useEffect, etc.) or event handlers that require 'use client'. Removing it will cause other errors.

  2. 90% fail

    The 'use cache' directive is not supported anywhere in the client component tree, including nested components that are still within a client boundary.

  3. 100% 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.