nextjs config_error ai_generated true

Error: fetch failed with 'no-store' and 'use cache' directive conflict

ID: nextjs/use-cache-no-store-fetch

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

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
[email protected] active — — —
[email protected] active — — —

Root Cause

When a component or function uses the 'use cache' directive to enable caching, but the fetch call inside it uses 'cache: no-store', Next.js throws an error because the two caching strategies are incompatible.

generic

中文

当组件或函数使用 'use cache' 指令启用缓存，但内部的 fetch 调用使用了 'cache: no-store' 时，Next.js 会抛出错误，因为两种缓存策略不兼容。

Official Documentation

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

Workarounds

  1. 90% success Remove 'cache: no-store' from the fetch call and rely on the 'use cache' directive for caching behavior. If fresh data is needed, use revalidation options like 'next: { revalidate: 0 }'. 
    Remove 'cache: no-store' from the fetch call and rely on the 'use cache' directive for caching behavior. If fresh data is needed, use revalidation options like 'next: { revalidate: 0 }'.
  2. 80% success Move the fetch call outside the 'use cache' scope by extracting it to a separate function without the directive. 
    Move the fetch call outside the 'use cache' scope by extracting it to a separate function without the directive.

中文步骤

  1. 从 fetch 调用中移除 'cache: no-store'，依赖 'use cache' 指令的缓存行为。如果需要新鲜数据，使用 'next: { revalidate: 0 }' 等重新验证选项。
  2. 将 fetch 调用移到 'use cache' 作用域之外，提取到没有该指令的单独函数中。

Dead Ends

Common approaches that don't work:

  1. 60% fail

    This disables caching for the entire component, which may degrade performance and is not always necessary.

  2. 80% fail

    This forces caching even when fresh data is needed, leading to stale responses.