Skip to content

Commit

Permalink
docs(fetch): clarify default fetch behavior (#72982)
Browse files Browse the repository at this point in the history
## Why?

The default fetch behavior, which is shown as `auto no cache` when you
set the config
[logging](https://nextjs.org/docs/app/api-reference/next-config-js/logging)
to `true`, essentially means fetch once on `next build` to prerender the
page. But, when a [Dynamic
API](https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-rendering)
is used, it will fetch from the resource on every request.

This is different from `{ cache: 'no-store' }`, which regardless of
whether Dynamic APIs are used, will de-op the page from prerendering.
  • Loading branch information
samcx authored Nov 21, 2024
1 parent 71978f9 commit 2fcb741
Showing 1 changed file with 4 additions and 3 deletions.
7 changes: 4 additions & 3 deletions docs/01-app/03-api-reference/04-functions/fetch.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@ Configure how the request should interact with Next.js [Data Cache](/docs/app/bu
fetch(`https://...`, { cache: 'force-cache' | 'no-store' })
```

- **`no-store`** (default): Next.js fetches the resource from the remote server on every request without looking in the cache, and it will not update the cache with the downloaded resource.
- **`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](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) 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.
Expand Down Expand Up @@ -83,11 +84,11 @@ Set the cache tags of a resource. Data can then be revalidated on-demand using [

## Troubleshooting

### Fetch `cache: 'no-store'` not showing fresh data in development
### Fetch default `auto no store` and `cache: 'no-store'` not showing fresh data in development

Next.js caches `fetch` 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, the [HMR cache](/docs/app/api-reference/config/next-config-js/serverComponentsHmrCache) applies to all fetch requests, including those with the `cache: '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.
By default, the [HMR cache](/docs/app/api-reference/config/next-config-js/serverComponentsHmrCache) applies to all fetch requests, including those with the default `auto no cache` and `cache: '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 the [`serverComponentsHmrCache`](/docs/app/api-reference/config/next-config-js/serverComponentsHmrCache) docs for more information.

Expand Down

0 comments on commit 2fcb741

Please sign in to comment.