Skip to content

Commit fbede36

Browse files
delbaoliveirasamcx
andauthored
Docs: Update fetch information in caching docs (vercel#67279)
Updates data cache docs to reflect `fetch` behavior in Next.js 15 RC. Closes: vercel#67238 --------- Co-authored-by: Sam Ko <sam@vercel.com>
1 parent fc87f8e commit fbede36

File tree

2 files changed

+13
-25
lines changed
  • docs/02-app

2 files changed

+13
-25
lines changed

docs/02-app/01-building-your-application/04-caching/index.mdx

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ Next.js has a built-in Data Cache that **persists** the result of data fetches a
124124

125125
> **Good to know**: In the browser, the `cache` option of `fetch` indicates how a request will interact with the browser's HTTP cache, in Next.js, the `cache` option indicates how a server-side request will interact with the server's Data Cache.
126126
127-
By default, data requests that use `fetch` are **cached**. You can use the [`cache`](#fetch-optionscache) and [`next.revalidate`](#fetch-optionsnextrevalidate) options of `fetch` to configure the caching behavior.
127+
By default, data requests that use `fetch` are not **cached**. You can use the [`cache`](#fetch-optionscache) and [`next.revalidate`](#fetch-optionsnextrevalidate) options of `fetch` to configure the caching behavior.
128128

129129
**How the Data Cache Works**
130130

@@ -136,10 +136,10 @@ By default, data requests that use `fetch` are **cached**. You can use the [`cac
136136
height="661"
137137
/>
138138

139-
- The first time a `fetch` request is called during rendering, Next.js checks the Data Cache for a cached response.
139+
- The first time a `fetch` request with the `'force-cache'` option is called during rendering, Next.js checks the Data Cache for a cached response.
140140
- If a cached response is found, it's returned immediately and [memoized](#request-memoization).
141141
- If a cached response is not found, the request is made to the data source, the result is stored in the Data Cache, and memoized.
142-
- For uncached data (e.g. `{ cache: 'no-store' }`), the result is always fetched from the data source, and memoized.
142+
- For uncached data (e.g. no `cache` option defined or using `{ cache: 'no-store' }`), the result is always fetched from the data source, and memoized.
143143
- Whether the data is cached or uncached, the requests are always memoized to avoid making duplicate requests for the same data during a React render pass.
144144

145145
> **Differences between the Data Cache and Request Memoization**
@@ -210,21 +210,9 @@ Data can be revalidated on-demand by path ([`revalidatePath`](#revalidatepath))
210210

211211
### Opting out
212212

213-
For individual data fetches, you can opt out of caching by setting the [`cache`](#fetch-optionscache) option to `no-store`. This means data will be fetched whenever `fetch` is called.
213+
Since `fetch` requests are not cached by default, you don't need to opt out of caching. This means data will be fetched from your data source whenever `fetch` is called.
214214

215-
```jsx
216-
// Opt out of caching for an individual `fetch` request
217-
fetch(`https://...`, { cache: 'no-store' })
218-
```
219-
220-
Alternatively, you can also use the [Route Segment Config options](#segment-config-options) to opt out of caching for a specific route segment. This will affect all data requests in the route segment, including third-party libraries.
221-
222-
```jsx
223-
// Opt out of caching for all data requests in the route segment
224-
export const dynamic = 'force-dynamic'
225-
```
226-
227-
> **Note**: Data Cache is currently only available in pages/routes, not middleware. Any fetches done inside of your middleware will be uncached by default.
215+
> **Note**: Data Cache is currently only available in Layout, Pages, and Route Handlers, not Middleware. Any fetches done inside of your middleware will not be cached by default.
228216
229217
> **Vercel Data Cache**
230218
>
@@ -431,26 +419,26 @@ See the [`useRouter` hook](/docs/app/api-reference/functions/use-router) API ref
431419

432420
### `fetch`
433421

434-
Data returned from `fetch` is automatically cached in the Data Cache.
422+
Data returned from `fetch` is **not** automatically cached in the Data Cache.
435423

436424
```jsx
437-
// Cached by default. `force-cache` is the default option and can be omitted.
438-
fetch(`https://...`, { cache: 'force-cache' })
425+
// Cached by default. `no-store` is the default option and can be omitted.
426+
fetch(`https://...`, { cache: 'no-store' })
439427
```
440428

429+
Since the render output depends on data, using `cache: 'no-store'` will also skip the Full Route Cache for the route where the `fetch` request is used. That is, the route will be dynamically rendered on every request, but you can still have other cached data requests in the same route.
430+
441431
See the [`fetch` API Reference](/docs/app/api-reference/functions/fetch) for more options.
442432

443433
### `fetch options.cache`
444434

445-
You can opt out individual `fetch` requests of data caching by setting the `cache` option to `no-store`:
435+
You can opt individual `fetch` into caching by setting the `cache` option to `force-cache`:
446436

447437
```jsx
448438
// Opt out of caching
449-
fetch(`https://...`, { cache: 'no-store' })
439+
fetch(`https://...`, { cache: 'force-cache' })
450440
```
451441

452-
Since the render output depends on data, using `cache: 'no-store'` will also skip the Full Route Cache for the route where the `fetch` request is used. That is, the route will be dynamically rendered every request, but you can still have other cached data requests in the same route.
453-
454442
See the [`fetch` API Reference](/docs/app/api-reference/functions/fetch) for more options.
455443

456444
### `fetch options.next.revalidate`

docs/02-app/02-api-reference/04-functions/fetch.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: API reference for the extended fetch function.
55

66
Next.js extends the native [Web `fetch()` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) to allow each request on the server to set its own persistent caching and revalidation semantics.
77

8-
In the browser, the `cache` option indicates how a fetch request will interact with the _browser's_ HTTP cache. With this extension, `cache` indicates how a _server-side_ fetch request will interact with the framework's persistent HTTP cache.
8+
In the browser, the `cache` option indicates how a fetch request will interact with the _browser's_ HTTP cache. With this extension, `cache` indicates how a _server-side_ fetch request will interact with the framework's persistent [Data Cache](/docs/app/building-your-application/caching#data-cache).
99

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

0 commit comments

Comments
 (0)