Q15: How do revalidatePath and revalidateTag clear the Data Cache?

Next.js aggressively caches fetch requests in the Data Cache. To purge stale cache data on demand:

revalidatePath('/posts'): Purges cached data associated with a specific URL route path.
revalidateTag('posts-tag'): Purges cached fetch requests tagged with a matching tag identifier (fetch(url, { next: { tags: ['posts-tag'] } })).

Tag-Based Fetch Cache Invalidation

// Fetching with tag
fetch('https://api.com/posts', { next: { tags: ['posts'] } });

// Inside Server Action
import { revalidateTag } from 'next/cache';

export async function addPost() {
  await db.post.create(...);
  revalidateTag('posts'); // Immediately purges all fetch calls tagged 'posts'
}

💡 revalidateTag purges matching fetch records instantly across the entire application.

Key Takeaways

revalidatePath purges route-specific cached data.
revalidateTag enables fine-grained multi-route cache purging.

Knowledge Check

Why is revalidateTag preferable over revalidatePath for purging cached data shared across multiple pages?

Q15: How do revalidatePath and revalidateTag clear the Data Cache?

STAY UPDATED WITH BYTES!