Demo

Data Revalidation

Revalidation refreshes cached data without rebuilding the entire site.
revalidatePath purges cache for a specific route or layout subtree.
revalidateTag purges all fetch requests tagged with a specific string.
Time-based revalidation uses next: { revalidate: seconds } in fetch options.
On-demand revalidation triggers from Server Actions, Route Handlers, or webhooks.
Combine strategies for optimal freshness and performance.

app/actions.ts

1'use server';
2import { revalidatePath, revalidateTag } from 'next/cache';
3
4export async function updateProduct(id: string, data: ProductData) {
5  await db.product.update(id, data);
6
7  // Option 1: Revalidate specific path
8  revalidatePath(`/products/${id}`);
9
10  // Option 2: Revalidate by tag
11  revalidateTag('products');
12}
13
14// In fetch calls, add tags for targeted revalidation
15const data = await fetch(url, {
16  next: { tags: ['products'], revalidate: 3600 },
17});

Revalidation Strategies

Strategy	Trigger	Best For
Time-based	Automatic after N seconds	News feeds, frequently updated content
On-demand (path)	Manual after mutations	Form submissions, single-page updates
On-demand (tag)	Manual, cross-route	CMS webhooks, shared data across pages

Demo

Click revalidatePath to increment views and revalidate this route.
Click revalidateTag to see tag-based invalidation.
Simulate a webhook that adds 10 views via external trigger.
Observe the timestamps updating after each revalidation.

Visual Summary

On-demand revalidation

Mutation

revalidate*()

Cache purge

Fresh data

Next request fetches fresh data after cache invalidation.

Key Takeaways

Topic	Guidance
Scope	Use tags for cross-page data, paths for single routes
Performance	Revalidation is incremental, not a full rebuild
Webhooks	Expose Route Handlers for external CMS triggers
Defaults	Without revalidate option, data is cached indefinitely

Pitfalls and Tips

Always add meaningful tags to fetch requests for fine-grained control.
Use revalidatePath('/', 'layout') to revalidate everything under root.
Time-based revalidation happens on first request after the interval, not automatically.
Combine with generateStaticParams for ISR (Incremental Static Regeneration).

Continue Learning

Demo	Description
Server Actions	Trigger revalidation after mutations
Cached Routes	Understand what gets cached
Static Rendering	ISR with generateStaticParams

Learn More

layout.tsx

Cached Data Display (Client)

Current Data

This data is cached and updates when revalidated

1234

Total Views

Invalid Date

Last Updated

Invalid Date

Fetched At

Revalidation Controls

Trigger Revalidation

Each button increments views and revalidates using a different method

Revalidation Methods Comparison

Method	Scope	Use Case
revalidatePath(path)	Single route or layout subtree	After form submission on specific page
revalidateTag(tag)	All fetches with matching tag	CMS webhook, cross-page data updates
{ next: { revalidate: 60 } }	Individual fetch request	Time-based freshness (ISR pattern)

Server Action Pattern

'use server';
import { revalidatePath } from 'next/cache';

export async function updateProduct(
  id: string,
  data: ProductData
) {
  await db.product.update(id, data);
  
  // Revalidate the product page
  revalidatePath(`/products/${id}`);
}

Tagged Fetch Pattern

// In Server Component
const data = await fetch(url, {
  next: { 
    tags: ['products', 'featured'],
    revalidate: 3600 // 1 hour
  }
});

// In Server Action
revalidateTag('products'); // All tagged fetches refresh

Best Practice

Prefer revalidateTag over revalidatePath for data that appears on multiple pages. Tags give you fine-grained control over which cached data to invalidate without knowing all the routes that use it.

The App Router Gallery

Current Data

Trigger Revalidation