Skip to content

Commit 5efef45

Browse files
maralicyJoseph
andauthored
Update caching.mdx (#81129)
### What? Fix misleading information in the docs about mixing cached and uncached `fetch` calls during dynamic rendering. ### Why? I followed the guide (using Next.js 15.3.2) and tried it out with this code: ```ts const joke = await fetch("https://api.chucknorris.io/jokes/random", { cache: "no-cache", }); const jokeData = await joke.json(); console.log("Fetched joke:", jokeData.value); const joke2 = await fetch( "https://api.chucknorris.io/jokes/random?category=dev" ); const jokeData2 = await joke2.json(); console.log("Fetched joke2:", jokeData2.value); ``` After building and starting the production server, when I refresh the page, both `jokeData.value` and `jokeData2.value` are different, uncached. If I want the other `fetch` to be cached, I need to explicitly enable caching, e.g. ```ts const joke = await fetch("https://api.chucknorris.io/jokes/random", { cache: "no-cache", }); const jokeData = await joke.json(); console.log("Fetched joke:", jokeData.value); const joke2 = await fetch( "https://api.chucknorris.io/jokes/random?category=dev", { cache: "force-cache", } ); const jokeData2 = await joke2.json(); console.log("Fetched joke2:", jokeData2.value); ``` This way the first fetch is not cached while the second one is. ### How? The previous version claimed: > Other `fetch` requests that do not opt out of caching will still be cached in the Data Cache. But below in the guide, we can see this: > The default caching behavior of fetch (e.g., when the cache option is not specified) is equal to setting the cache option to no-store: So the first citation is misleading - the fetch requests are not cached by default (with dynamic rendering - static rendering would cache the single call it into the output), so we actually need to explicitly enable caching to have them cached. Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>
1 parent d41950d commit 5efef45

File tree

1 file changed

+1
-1
lines changed

1 file changed

+1
-1
lines changed

docs/01-app/02-guides/caching.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -312,7 +312,7 @@ You can opt out of the Full Route Cache, or in other words, dynamically render c
312312

313313
- **Using a [Dynamic API](#dynamic-apis)**: This will opt the route out from the Full Route Cache and dynamically render it at request time. The Data Cache can still be used.
314314
- **Using the `dynamic = 'force-dynamic'` or `revalidate = 0` route segment config options**: This will skip the Full Route Cache and the Data Cache. Meaning components will be rendered and data fetched on every incoming request to the server. The Router Cache will still apply as it's a client-side cache.
315-
- **Opting out of the [Data Cache](#data-cache)**: If a route has a `fetch` request that is not cached, this will opt the route out of the Full Route Cache. The data for the specific `fetch` request will be fetched for every incoming request. Other `fetch` requests that do not opt out of caching will still be cached in the Data Cache. This allows for a hybrid of cached and uncached data.
315+
- **Opting out of the [Data Cache](#data-cache)**: If a route has a `fetch` request that is not cached, this will opt the route out of the Full Route Cache. The data for the specific `fetch` request will be fetched for every incoming request. Other `fetch` requests that explicitly enable caching will still be cached in the Data Cache. This allows for a hybrid of cached and uncached data.
316316

317317
## Client-side Router Cache
318318

0 commit comments

Comments
 (0)