You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/02-app/01-building-your-application/04-caching/index.mdx
+12-24Lines changed: 12 additions & 24 deletions
Original file line number
Diff line number
Diff line change
@@ -124,7 +124,7 @@ Next.js has a built-in Data Cache that **persists** the result of data fetches a
124
124
125
125
> **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.
126
126
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.
128
128
129
129
**How the Data Cache Works**
130
130
@@ -136,10 +136,10 @@ By default, data requests that use `fetch` are **cached**. You can use the [`cac
136
136
height="661"
137
137
/>
138
138
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.
140
140
- If a cached response is found, it's returned immediately and [memoized](#request-memoization).
141
141
- 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.
143
143
- 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.
144
144
145
145
> **Differences between the Data Cache and Request Memoization**
@@ -210,21 +210,9 @@ Data can be revalidated on-demand by path ([`revalidatePath`](#revalidatepath))
210
210
211
211
### Opting out
212
212
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.
214
214
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
-
exportconstdynamic='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.
228
216
229
217
> **Vercel Data Cache**
230
218
>
@@ -431,26 +419,26 @@ See the [`useRouter` hook](/docs/app/api-reference/functions/use-router) API ref
431
419
432
420
### `fetch`
433
421
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.
435
423
436
424
```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' })
439
427
```
440
428
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
+
441
431
See the [`fetch` API Reference](/docs/app/api-reference/functions/fetch) for more options.
442
432
443
433
### `fetch options.cache`
444
434
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`:
446
436
447
437
```jsx
448
438
// Opt out of caching
449
-
fetch(`https://...`, { cache:'no-store' })
439
+
fetch(`https://...`, { cache:'force-cache' })
450
440
```
451
441
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
-
454
442
See the [`fetch` API Reference](/docs/app/api-reference/functions/fetch) for more options.
Copy file name to clipboardExpand all lines: docs/02-app/02-api-reference/04-functions/fetch.mdx
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ description: API reference for the extended fetch function.
5
5
6
6
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.
7
7
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).
9
9
10
10
You can call `fetch` with `async` and `await` directly within Server Components.
0 commit comments