Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

correct expire calc & and Nested usage import in use-cache docs #71899

Merged
merged 5 commits into from
Oct 29, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need to import it since it's in the same file. But, thinking about it, maybe we should make it more clearer that these can be in different folders by having two code blocks, then Parent can import the Child component.

Would you like to make that change @Developerayo?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For sure! Pushed...

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you 🫶


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
Loading