nextjs data_error ai_generated true

Error: fetch failed with 'no-store' / Dynamic server usage: force-dynamic

ID: nextjs/fetch-cache-no-store

Also available as: JSON · Markdown
88%Fix Rate
90%Confidence
50Evidence
2023-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
14 active — — —

Root Cause

fetch with cache: 'no-store' makes the route dynamic, conflicting with static generation.

generic

Workarounds

  1. 95% success Use revalidate instead of no-store for ISR: fetch(url, { next: { revalidate: 60 } }) 
    fetch(url, { next: { revalidate: 60 } })

    Sources: https://nextjs.org/docs/app/building-your-application/data-fetching/caching-and-revalidating

  2. 88% success If truly dynamic, set export const dynamic = 'force-dynamic' in the page 
    // At the top of the page file:
export const dynamic = 'force-dynamic';

// This opts the entire page into dynamic rendering
// All fetch() calls in this page will be uncached by default

    Sources: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic

  3. 82% success Understand the trade-off: static = fast/cached, dynamic = fresh/slower 
    static = fast/cached, dynamic = fresh/slower

    Sources: https://nextjs.org/docs/app/building-your-application/rendering/server-components

Dead Ends

Common approaches that don't work:

  1. Remove cache: 'no-store' to make it static 55% fail

    May serve stale data if the API data changes frequently

  2. Set force-static on the route segment 65% fail

    Force-static will fail if the page truly needs dynamic data

Error Chain

Frequently confused with: