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
> The `use cache` directive will be available separately from the`dynamicIO` flag in the future.
32
+
> The `use cache` directive will be available separately from the`dynamicIO` flag in the future.
33
33
34
-
Caching is a technique to improve the performance of web applications by storing the results of computations or data fetches. In Next.js you can use caching to optimize your applications rendering performance.
35
-
36
-
To explicitly cache certain asynchronous operations and achieve static behavior, you can use the `use cache` directive. This allows you to optimize rendering performance by caching results from async data requests, while still enabling dynamic rendering when needed.
34
+
Caching is a technique used to improve the performance of web applications by storing the results of rendering or data requests. Whenever you use an asynchronous function or APIs that depend on request-time data, Next.js will automatically opt into dynamic rendering. You can explicitly cache the results of these operations and optimize your application's rendering performance with the `use cache` directive.
37
35
38
36
The `use cache` directive is an experimental feature that aims to replace the [`unstable_cache`](/docs/app/api-reference/legacy-apis/unstable_cache) function. Unlike `unstable_cache`, which is limited to caching JSON data and requires manual definition of revalidation periods and tags, `use cache` offers more flexibility. It allows you to cache a wider range of data, including anything that React Server Components (RSC) can serialize, as well as data-fetching outputs and component outputs.
39
37
@@ -69,9 +67,9 @@ export async function getData() {
69
67
70
68
## Revalidating
71
69
72
-
By default when using the `use cache` directive Next.js sets a **[revalidation period](/docs/app/building-your-application/data-fetching/fetching#revalidating-cached-data) of fifteen minutes** with a nearinfinite expiration duration, meaning it's suitable for content that doesn't need frequent updates.
70
+
By default, Next.js sets a **[revalidation period](/docs/app/building-your-application/data-fetching/fetching#revalidating-cached-data) of 15 minutes**when you use the `use cache` directive. Next.js sets a with a near-infinite expiration duration, meaning it's suitable for content that doesn't need frequent updates.
73
71
74
-
While this may be useful for content you don't expect to change often, you can use the `cacheLife` and `cacheTag` APIs for more granular caching control:
72
+
While this revalidation period may be useful for content you don't expect to change often, you can use the `cacheLife` and `cacheTag` APIs to configure the cache behavior:
75
73
76
74
-[`cacheLife`](#time-based-revalidation-with-cachelife): For time-based revalidation periods.
77
75
-[`cacheTag`](#revalidate-on-demand-with-cachetag): For on-demand revalidation.
@@ -150,7 +148,7 @@ The string values used to reference cache profiles don't carry inherent meaning;
150
148
151
149
### Defining reusable cache profiles
152
150
153
-
To create a reusable cache profile, choose a name that suits your use case. You can create as many custom cache profiles as needed. Each profile can be referenced by its name as a string value passed to the `cacheLife` function.
151
+
You can create a reusable cache profile by defining them in your `next.config.ts` file. Choose a name that suits your use case and set values for the `stale`, `revalidate`, and `expire` properties. You can create as many custom cache profiles as needed. Each profile can be referenced by its name as a string value passed to the `cacheLife` function.
154
152
155
153
```ts filename="next.config.ts"
156
154
const nextConfig = {
@@ -205,7 +203,7 @@ const nextConfig = {
205
203
module.exports=nextConfig
206
204
```
207
205
208
-
### Defining inlining cache profiles
206
+
### Defining cache profiles inline
209
207
210
208
For specific use cases, you can set a custom cache profile by passing an object to the `cacheLife` function:
211
209
@@ -226,13 +224,13 @@ This inline cache profile will only be applied to the function or file it was cr
226
224
227
225
### Nested usage of `use cache` and `cacheLife`
228
226
229
-
When defining multiple caching behaviors, in the same route or component tree, if the inner caches specify their own `cacheLife` profile, the outer cache will respect the shortest cache duration among them. **This applies only if the outer cache does not have its own explicit `cacheLife` profile defined.**
227
+
When defining multiple caching behaviors in the same route or component tree, if the inner caches specify their own `cacheLife` profile, the outer cache will respect the shortest cache duration among them. **This applies only if the outer cache does not have its own explicit `cacheLife` profile defined.**
230
228
231
229
**Decision hierarchy for cache boundaries:**
232
230
233
231
1. Next.js will use the shortest cache profile found within the whole `use cache` boundary, excluding inner `use cache` directives.
234
-
2. If no cache profile exists then the shortest profile times from all inner `use cache` calls applies to this `use cache`. If there are no inner `use cache`'s then the default is used
235
-
3. Inner caches at two levels deep, do not affect the outer cache since they have already provided their duration to their parent.
232
+
2. If no cache profile exists, then the shortest profile times from all inner `use cache` calls applies to this `use cache`. If there are no inner `use cache`'s then the default is used
233
+
3. Inner caches at two levels deep do not affect the outer cache since they have already provided their duration to their parent.
236
234
237
235
For example, if you add the `use cache` directive to your page, without specifying a cache profile, the default cache profile will be applied implicitly (`cacheLife(”default”)`). If a component imported into the page also uses the `use cache` directive with its own cache profile, the outer and inner cache profiles are compared, and shortest duration set in the profiles will be applied.
238
236
@@ -272,9 +270,9 @@ export async function ChildComponent() {
272
270
273
271
A `cacheTag` is used in combination with [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) to purge cache data, on-demand. The `cacheTag` function takes a single string value, or a string array.
274
272
275
-
In the below examplethe `getData` function uses the “weeks” cache profile, and defines a `cacheTag` on the functions cached output:
273
+
In the following example,the `getData` function uses the “weeks” cache profile, and defines a `cacheTag` on the functions cached output:
276
274
277
-
```tsx filename="app/actions.ts" highlight={8,9}
275
+
```tsx filename="app/actions.ts" highlight={2,9}
278
276
import {
279
277
unstable_cacheTagascacheTag,
280
278
unstable_cacheLifeascacheLife,
@@ -290,9 +288,9 @@ export async function getData() {
290
288
}
291
289
```
292
290
293
-
You can then purge the cache on-demand using `revalidateTag`in another function, for examples, a [route handler](/docs/app/building-your-application/routing/route-handlers) or [Server Action](/docs/app/building-your-application/data-fetching/server-actions-and-mutations):
291
+
You can then purge the cache on-demand using [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) API in another function, for example, a [route handler](/docs/app/building-your-application/routing/route-handlers) or [Server Action](/docs/app/building-your-application/data-fetching/server-actions-and-mutations):
0 commit comments