Skip to content

Commit 1f8ea2a

Browse files
authored
docs: Clarify revalidatePath (vercel#82142)
Fixes: vercel#81776
1 parent 7525994 commit 1f8ea2a

2 files changed

Lines changed: 99 additions & 13 deletions

File tree

docs/01-app/03-api-reference/04-functions/revalidatePath.mdx

Lines changed: 63 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,83 @@ description: API Reference for the revalidatePath function.
55

66
`revalidatePath` allows you to purge [cached data](/docs/app/guides/caching) on-demand for a specific path.
77

8+
## Usage
9+
10+
`revalidatePath` can be called in Server Functions and Route Handlers.
11+
12+
`revalidatePath` cannot be called in Client Components or Middleware, as it only works in server environments.
13+
814
> **Good to know**:
915
>
10-
> - `revalidatePath` only invalidates the cache when the included path is next visited. This means calling `revalidatePath` with a dynamic route segment will not immediately trigger many revalidations at once. The invalidation only happens when the path is next visited.
11-
> - Currently, `revalidatePath` invalidates all the routes in the [client-side Router Cache](/docs/app/guides/caching#client-side-router-cache) when used in a server action. This behavior is temporary and will be updated in the future to apply only to the specific path.
12-
> - Using `revalidatePath` invalidates **only the specific path** in the [server-side Route Cache](/docs/app/guides/caching#full-route-cache).
16+
> - **Server Functions**: Updates the UI immediately (if viewing the revalidated path). Currently, it also causes all previously visited pages to refresh when navigated to again. This behavior is temporary and will be updated in the future to apply only to the specific path.
17+
> - **Route Handlers**: Marks the path for revalidation. The revalidation is done on the next visit to the specified path. This means calling `revalidatePath` with a dynamic route segment will not immediately trigger many revalidations at once. The invalidation only happens when the path is next visited.
1318
1419
## Parameters
1520

1621
```tsx
1722
revalidatePath(path: string, type?: 'page' | 'layout'): void;
1823
```
1924

20-
- `path`: Either a string representing the filesystem path associated with the data you want to revalidate (for example, `/product/[slug]/page`), or the literal route segment (for example, `/product/123`). Must be less than 1024 characters. This value is case-sensitive.
25+
- `path`: Either a string representing the filesystem path associated with the data you want to revalidate (for example, `/product/[slug]/page`), or the literal route segment (for example, `/product/123`). Must not exceed 1024 characters. This value is case-sensitive.
2126
- `type`: (optional) `'page'` or `'layout'` string to change the type of path to revalidate. If `path` contains a dynamic segment (for example, `/product/[slug]/page`), this parameter is required. If path refers to the literal route segment, e.g., `/product/1` for a dynamic page (e.g., `/product/[slug]/page`), you should not provide `type`.
2227

2328
## Returns
2429

2530
`revalidatePath` does not return a value.
2631

32+
## What can be revalidated
33+
34+
The path parameter can point to pages, layouts, or route handlers:
35+
36+
- **Pages**: Revalidates the specific page
37+
- **Layouts**: Revalidates the layout and all pages beneath it
38+
- **GET Route Handlers**: Only if they're statically generated
39+
40+
## Relationship with `revalidateTag`
41+
42+
`revalidatePath` and [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) serve different purposes:
43+
44+
- **`revalidatePath`**: Revalidates a specific page or layout path
45+
- **`revalidateTag`**: Revalidates data with specific tags across all pages that use those tags
46+
47+
When you call `revalidatePath`, only the specified path gets fresh data on the next visit. Other pages that use the same data tags will continue to serve cached data until those specific tags are also revalidated:
48+
49+
```tsx
50+
// Page A: /blog
51+
const posts = await fetch('https://api.vercel.app/blog', {
52+
next: { tags: ['posts'] },
53+
})
54+
55+
// Page B: /dashboard
56+
const recentPosts = await fetch('https://api.vercel.app/blog?limit=5', {
57+
next: { tags: ['posts'] },
58+
})
59+
```
60+
61+
After calling `revalidatePath('/blog')`:
62+
63+
- **Page A (/blog)**: Shows fresh data (page re-rendered)
64+
- **Page B (/dashboard)**: Still shows stale data (cache tag 'posts' not invalidated)
65+
66+
### Building revalidation utilities
67+
68+
`revalidatePath` and `revalidateTag` are complementary primitives that are often used together in utility functions to ensure comprehensive data consistency across your application:
69+
70+
```ts
71+
'use server'
72+
73+
import { revalidatePath, revalidateTag } from 'next/cache'
74+
75+
export async function updatePost() {
76+
await updatePostInDatabase()
77+
78+
revalidatePath('/blog') // Refresh the blog page
79+
revalidateTag('posts') // Refresh all pages using 'posts' tag
80+
}
81+
```
82+
83+
This pattern ensures that both the specific page and any other pages using the same data remain consistent.
84+
2785
## Examples
2886

2987
### Revalidating A Specific URL
@@ -67,7 +125,7 @@ revalidatePath('/', 'layout')
67125

68126
This will purge the Client-side Router Cache, and revalidate the Data Cache on the next page visit.
69127

70-
### Server Action
128+
### Server Function
71129

72130
```ts filename="app/actions.ts" switcher
73131
'use server'

docs/01-app/03-api-reference/04-functions/revalidateTag.mdx

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,21 @@ description: API Reference for the revalidateTag function.
55

66
`revalidateTag` allows you to purge [cached data](/docs/app/guides/caching) on-demand for a specific cache tag.
77

8-
> **Good to know**:
9-
>
10-
> - `revalidateTag` only invalidates the cache when the path is next visited. This means calling `revalidateTag` with a dynamic route segment will not immediately trigger many revalidations at once. The invalidation only happens when the path is next visited.
8+
## Usage
9+
10+
`revalidateTag` can be called in Server Functions and Route Handlers.
11+
12+
`revalidateTag` cannot be called in Client Components or Middleware, as it only works in server environments.
13+
14+
> **Good to know**: `revalidateTag` marks tagged data as stale, but fresh data is only fetched when pages using that tag are next visited. This means calling `revalidateTag` will not immediately trigger many revalidations at once. The invalidation only happens when any page using that tag is next visited.
1115
1216
## Parameters
1317

1418
```tsx
1519
revalidateTag(tag: string): void;
1620
```
1721

18-
- `tag`: A string representing the cache tag associated with the data you want to revalidate. Must be less than or equal to 256 characters. This value is case-sensitive.
22+
- `tag`: A string representing the cache tag associated with the data you want to revalidate. Must not exceed 256 characters. This value is case-sensitive.
1923

2024
You can add tags to `fetch` as follows:
2125

@@ -27,6 +31,12 @@ fetch(url, { next: { tags: [...] } });
2731

2832
`revalidateTag` does not return a value.
2933

34+
## Relationship with `revalidatePath`
35+
36+
`revalidateTag` revalidates data with specific tags across all pages that use those tags, while [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) revalidates specific page or layout paths.
37+
38+
> **Good to know**: These functions serve different purposes and may need to be used together for comprehensive data consistency. For detailed examples and considerations, see [Relationship with revalidateTag](/docs/app/api-reference/functions/revalidatePath#relationship-with-revalidatetag).
39+
3040
## Examples
3141

3242
### Server Action
@@ -61,8 +71,17 @@ import { revalidateTag } from 'next/cache'
6171

6272
export async function GET(request: NextRequest) {
6373
const tag = request.nextUrl.searchParams.get('tag')
64-
revalidateTag(tag)
65-
return Response.json({ revalidated: true, now: Date.now() })
74+
75+
if (tag) {
76+
revalidateTag(tag)
77+
return Response.json({ revalidated: true, now: Date.now() })
78+
}
79+
80+
return Response.json({
81+
revalidated: false,
82+
now: Date.now(),
83+
message: 'Missing tag to revalidate',
84+
})
6685
}
6786
```
6887

@@ -71,7 +90,16 @@ import { revalidateTag } from 'next/cache'
7190

7291
export async function GET(request) {
7392
const tag = request.nextUrl.searchParams.get('tag')
74-
revalidateTag(tag)
75-
return Response.json({ revalidated: true, now: Date.now() })
93+
94+
if (tag) {
95+
revalidateTag(tag)
96+
return Response.json({ revalidated: true, now: Date.now() })
97+
}
98+
99+
return Response.json({
100+
revalidated: false,
101+
now: Date.now(),
102+
message: 'Missing tag to revalidate',
103+
})
76104
}
77105
```

0 commit comments

Comments
 (0)