14. On-Demand Revalidation: revalidatePath vs revalidateTag with Cache Tags • Next.js 14+ App Router & Full-Stack Architecture • Rishabh Ki Kaksha

*   **`revalidatePath('/products')` (Coarse-Grained):** Us specific URL path ke poore Full Route Cache aur Data Cache ko invalidate karta hai.
*   **`revalidateTag('collection_name')` (Fine-Grained - Big Tech Gold 👑):** Chahe wo data 10 alag-alag pages par render ho raha ho, **sirf us specific tag ke cached fetch requests ko globally purge karta hai!**

---

### 2. Tag-Based Caching Architecture in Action

```typescript
// 1. Fetch with Cache Tag:
export async function getProduct(id: string) {
    const res = await fetch(`https://api.com/products/${id}`, {
        next: { tags: [`product-${id}`, 'products'] }
    });
    return res.json();
}

// 2. Server Action to Update Product & Purge Globally:
// app/actions/product.ts
"use server";
import { revalidateTag } from "next/cache";

export async function updateProductPrice(id: string, newPrice: number) {
    await db.products.update({ where: { id }, data: { price: newPrice } });

// ⚡ Instant Cache Purge across ALL pages (Home, Category, Search, Product Details):
    revalidateTag(`product-${id}`);
}
```

---

### 3. Master Comparison Matrix

---

### 4. Interview Ke 3 Sawal Is Topic Se

1. **`revalidatePath` me second parameter `'layout'` pass karne par kya hota hai?** -> Us layout ke andar aane wale saare child nested routes ka cache recursive purge ho jata hai (`revalidatePath('/dashboard', 'layout')`).
2. **On-demand revalidation ke waqt user ko naya data turant milta hai ya agle visit par?** -> Next.js cache ko purge kar deta hai aur subsequent next request par background me fresh page render karta hai (Stale-While-Revalidate).
3. **Database ORM queries (jaise Prisma) ko tag-based cache kaise karte hain?** -> `unstable_cache` helper function use karke custom DB queries ko cache tags assign kiye jaate hain.

---
**Next Topic:** 15. Partial Prerendering (PPR): Combining Static Shells with Dynamic Holes

Loading lesson content...

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track