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.

Sign up for GitHub

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

Jump to bottom

Fix use cache example line highlights #71883

Merged
merged 2 commits into from
Oct 28, 2024
Merged

Fix use cache example line highlights #71883

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1015c08
Fix use cache example line highlights
gaearon Oct 26, 2024
04c0070
Merge branch 'canary' into patch-2
delbaoliveira Oct 28, 2024
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: 5 additions & 5 deletions docs/02-app/02-api-reference/01-directives/use-cache.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@ A `cacheTag` is used in combination with [`revalidateTag`](/docs/app/api-referen

In the below example the `getData` function uses the “weeks” cache profile, and defines a `cacheTag` on the functions cached output:

```tsx filename="app/actions.ts" highlight={4,5}
```tsx filename="app/actions.ts" highlight={8,9}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

fix

import {
unstable_cacheTag as cacheTag,
unstable_cacheLife as cacheLife,
Expand All @@ -286,7 +286,7 @@ export async function getData() {

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):

```tsx filename="app/submit.ts" highlight={4,5}
```tsx filename="app/submit.ts" highlight={6,7}
'use server'

import { revalidateTag } from 'next/cache'
Expand All @@ -311,7 +311,7 @@ This is recommended for applications that previously used the [`export const dyn

```tsx filename="app/layout.tsx"
"use cache"
import { unstable_cacheLife as cacheLife} from 'next/cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'
Copy link
Contributor Author

Choose a reason for hiding this comment

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

driveby style fix

cacheLife('minutes')

export default Layout({children}: {children: ReactNode}) {
Expand All @@ -323,7 +323,7 @@ And in your `page.tsx` file you can add the `use cache` directive to the top of

```tsx filename="app/page.tsx"
"use cache"
import { unstable_cacheLife as cacheLife} from 'next/cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'
cacheLife('minutes')

async function Users() {
Expand All @@ -346,7 +346,7 @@ You can use `use cache` at the component level to cache any fetches or computati

The props are serialized and form part of the cache key. If you use the same component in multiple places in your application, the cache entry will be reused as long as the serialized props produce the same value in each instance.

```tsx filename="app/components/bookings.tsx" highlight={4,5}
```tsx filename="app/components/bookings.tsx" highlight={8,9}
import { unstable_cacheLife as cacheLife } from 'next/cache'

interface BookingsProps {
Expand Down
Loading