fetch

Next.js extends theWebfetch() API to allow each request on the server to set its own persistent caching and revalidation semantics.

In the browser, thecache option indicates how a fetch request will interact with thebrowser's HTTP cache. With this extension,cache indicates how aserver-side fetch request will interact with the framework's persistentData Cache.

You can callfetch withasync andawait directly within Server Components.

exportdefaultasyncfunctionPage() {let data=awaitfetch('https://api.vercel.app/blog')let posts=awaitdata.json()return (    <ul>      {posts.map((post)=> (        <likey={post.id}>{post.title}</li>      ))}    </ul>  )}

fetch(url, options)

Since Next.js extends theWebfetch() API, you can use any of thenative options available.

options.cache

Configure how the request should interact with Next.jsData Cache.

fetch(`https://...`, { cache:'force-cache'|'no-store' })

• auto no cache (default): Next.js fetches the resource from the remote server on every request in development, but will fetch once duringnext build because the route will be statically prerendered. IfDynamic APIs are detected on the route, Next.js will fetch the resource on every request.
• no-store: Next.js fetches the resource from the remote server on every request, even if Dynamic APIs are not detected on the route.
• force-cache: Next.js looks for a matching request in its Data Cache.
  • If there is a match and it is fresh, it will be returned from the cache.
  • If there is no match or a stale match, Next.js will fetch the resource from the remote server and update the cache with the downloaded resource.

options.next.revalidate

fetch(`https://...`, { next: { revalidate:false|0| number } })

Set the cache lifetime of a resource (in seconds).Data Cache.

• false - Cache the resource indefinitely. Semantically equivalent torevalidate: Infinity. The HTTP cache may evict older resources over time.
• 0 - Prevent the resource from being cached.
• number - (in seconds) Specify the resource should have a cache lifetime of at mostn seconds.

Good to know:

• If an individualfetch() request sets arevalidate number lower than thedefaultrevalidate of a route, the whole route revalidation interval will be decreased.
• If two fetch requests with the same URL in the same route have differentrevalidate values, the lower value will be used.
• Conflicting options such as{ revalidate: 3600, cache: 'no-store' } are not allowed, both will be ignored, and in development mode a warning will be printed to the terminal.

options.next.tags

fetch(`https://...`, { next: { tags: ['collection'] } })

Set the cache tags of a resource. Data can then be revalidated on-demand usingrevalidateTag. The max length for a custom tag is 256 characters and the max tag items is 128.

Troubleshooting

Fetch defaultauto no store andcache: 'no-store' not showing fresh data in development

Next.js cachesfetch responses in Server Components across Hot Module Replacement (HMR) in local development for faster responses and to reduce costs for billed API calls.

By default, theHMR cache applies to all fetch requests, including those with the defaultauto no cache andcache: 'no-store' option. This means uncached requests will not show fresh data between HMR refreshes. However, the cache will be cleared on navigation or full-page reloads.

See theserverComponentsHmrCache docs for more information.

Hard refresh and caching in development

In development mode, if the request includes thecache-control: no-cache header,options.cache,options.next.revalidate, andoptions.next.tags are ignored, and thefetch request is served from the source.

Browsers typically includecache-control: no-cache when the cache is disabled in developer tools or during a hard refresh.

Version History