On-Demand Cache Revalidation with revalidatePath and revalidateTag0%
Optimistic UI Updates with React useOptimistic Hook

On-Demand Cache Revalidation with revalidatePath and revalidateTag

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

On-Demand Cache Revalidation with revalidatePath and revalidateTag

Static caching delivers blazing speed, but modern web applications require instant updates when content changes. Next.js provides two fundamental on-demand revalidation APIs: revalidatePath (invalidating specific route URLs) and revalidateTag (invalidating data associated with semantic cache tags across the entire application).

1. Path-Based Revalidation: revalidatePath()

revalidatePath allows purging cached data and server-rendered HTML for a specific route:

TypeScript
import { revalidatePath } from 'next/cache';
 
// Purge cache for a specific page:
revalidatePath('/courses/tailwind-css-mastery');
 
// Purge cache for all dynamic routes under a folder:
revalidatePath('/courses/[slug]', 'page');
 
// Purge cache for an entire layout and all its nested children:
revalidatePath('/admin', 'layout');

2. Tag-Based Revalidation: revalidateTag() (Semantic Granularity)

While revalidatePath targets a URL, a single piece of data (e.g. a course's title and price) might be displayed on multiple pages: the Homepage, the Course Catalog, the Checkout Page, and the User Dashboard.

Revalidating paths one-by-one is fragile. revalidateTag associates data with a tag, purging every occurrence across all pages in a single call!

TypeScript
// 1. Fetching with cache tags in Server Components:
const courseData = await fetch('https://api.example.com/courses/10', {
next: { tags: ['courses', 'course-10'] }
});
TypeScript
// 2. Invalidate everywhere in a Server Action or Webhook:
import { revalidateTag } from 'next/cache';
 
export async function updateCoursePriceAction(courseId: string, newPrice: number) {
await updatePriceInDb(courseId, newPrice);
 
// Invalidate EVERY component and page that cached 'course-10'!
revalidateTag(`course-${courseId}`);
}

3. Comparison: When to Use Which?

FeaturerevalidatePathrevalidateTag
ScopeTargets a specific URL path or route layoutTargets semantic data entities across the entire site
Use CaseForm submission updating a single specific viewCMS webhooks, product price updates, user profile edits
GranularityCoarse-grained (entire page or layout)Fine-grained (exact data payload)
Interactive Quiz

Multiple Choice Questions

Question 1
What does revalidatePath('/blog') do?
Question 2
If a single product entity is displayed on 5 different pages across your website, what is the most efficient revalidation strategy?
Question 3
In what environments can revalidatePath and revalidateTag be executed?
Question 4
What does passing 'layout' as the second argument to revalidatePath('/dashboard', 'layout') accomplish?
Question 5
How quickly do cache revalidations take effect?
Next Lesson

Optimistic UI Updates with React useOptimistic Hook

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Form Handling with useActionState, useFormStatus & Zod ValidationOptimistic UI Updates with React useOptimistic Hook

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext