fetch

You can call fetch with async and await directly within Server Components.

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 during next build because the route will be statically prerendered. If Dynamic APIs are detected on the route, Next.js will fetch the resource on every request.

No Cache

Next.js fetches the resource from the remote server on every request, even if Dynamic APIs are not detected on the route.

let data = await fetch('<https://api.vercel.app/blog>', { cache: 'no-store' })

Cache

You can opt individual fetch into caching by setting the cache option to force-cache:

// Opt into caching
fetch(`https://...`, { cache: '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.

Revalidating

Time-based Revalidation

Revalidate data after a certain amount of time has passed and a new request is made. This is useful for data that changes infrequently and freshness is not as critical.

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

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

• false - Cache the resource indefinitely. Semantically equivalent to revalidate: Infinity. The HTTP cache may evict older resources over time.
• 0 - Prevent the resource from being cached.