0PricingLogin▼
Next.js 15 Fullstack (App Router + Server Actions) · Lesson

Tag-Based Invalidation for Granular Cache Busting

Attach cache tags to fetches and invalidate exactly the affected data after mutations.

Why Tag-Based Invalidation

In Next.js 15, the Data Cache persists fetch results across requests and deployments. The challenge is busting exactly the right entries after a mutation.

  • Time-based revalidation (revalidate: 60) is coarse and clock-driven.
  • Path-based (revalidatePath) clears whole route segments.
  • Tag-based lets you label individual fetches and invalidate just those, no matter which page rendered them.

Tags give you granular, surgical cache busting: update one product, invalidate only the fetches that read that product.

Attaching a Tag to a Fetch

You attach tags through the next.tags option on the extended fetch. Each tag is a plain string you choose.

Here a product list fetch is labelled with two tags: a broad products tag and a specific product-42 tag.

  • The broad tag invalidates the whole collection.
  • The specific tag invalidates one item.
async function getProduct(id: string) {
  const res = await fetch(`https://api.shop.com/products/${id}`, {
    next: { tags: ['products', `product-${id}`] },
  });
  if (!res.ok) throw new Error('Failed to load product');
  return res.json();
}

All lessons in this course

  1. The Four Caches: Request, Data, Full Route, and Router
  2. Time-Based and On-Demand Revalidation Strategies
  3. Tag-Based Invalidation for Granular Cache Busting
  4. Opting Out: Dynamic Rendering and no-store
← Back to Next.js 15 Fullstack (App Router + Server Actions)