Skip to content

Commit

Permalink
correct expire calc & and Nested usage import in use-cache docs (#71899)
Browse files Browse the repository at this point in the history
Co-authored-by: Delba de Oliveira <[email protected]>
  • Loading branch information
Developerayo and delbaoliveira authored Oct 29, 2024
1 parent 3768aea commit 3f2d2f6
Showing 1 changed file with 8 additions and 2 deletions.
10 changes: 8 additions & 2 deletions docs/02-app/02-api-reference/01-directives/use-cache.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -230,15 +230,16 @@ When defining multiple caching behaviors, in the same route or component tree, i

**Decision hierarchy for cache boundaries:**

1. Next.js will use the shortest cache profile found within the whole `use cache` boundary, excluding inner `use cache`directives.
1. Next.js will use the shortest cache profile found within the whole `use cache` boundary, excluding inner `use cache` directives.
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
3. Inner caches at two levels deep, do not affect the outer cache since they have already provided their duration to their parent.

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.

```tsx filename="app/components/parent.tsx" highlight={5,6,19,20}
```tsx filename="app/components/parent.tsx" highlight={5,6}
// Parent component
import { unstable_cacheLife as cacheLife } from 'next/cache'
import { ChildComponent } from './child'

export async function ParentComponent() {
'use cache'
Expand All @@ -250,13 +251,18 @@ export async function ParentComponent() {
</div>
)
}
```

And in a separate file, we defined the Child component that was imported:

```tsx filename="app/components/child.tsx" highlight={4,5}
// Child component
import { unstable_cacheLife as cacheLife } from 'next/cache'

export async function ChildComponent() {
'use cache'
cacheLife('hours')
return <div>Child Content</div>

// This component's cache will respect the shorter 'hours' profile
}
Expand Down

0 comments on commit 3f2d2f6

Please sign in to comment.