nextjs - 💡(How to fix) Fix revalidateTag with `expire: 0` not triggering immediate UI update when called from API route [1 comments, 2 participants]

Version

Operating System: Platform: win32 Arch: x64 Version: Windows 10 Pro Available memory (MB): 32694 Available CPU cores: 24 Binaries: Node: 22.19.0 npm: 10.9.2 Yarn: 4.7.0 pnpm: N/A Relevant Packages: next: 16.0.7 // Latest available version is detected (16.0.7). eslint-config-next: N/A react: 19.2.0 react-dom: 19.2.0 typescript: 5.9.3 Next.js Config: output: N/A

Describe the bug

When using revalidateTag() with { expire: 0 } from an API route, the cache invalidation works but the UI doesn't update immediately. A manual page refresh is required to see the new cached value. This differs from server actions, which trigger immediate UI updates.

Reproduction

Repository: https://github.com/rRakarare/Next-js-cache-purge-via-route

Cached server function:

"use server";
import { cacheTag } from "next/cache";

export async function getCachedValue() {
  "use cache";
  cacheTag("random");
  return Math.random();
}

Server action (immediate UI update ✅):

"use server";
import { revalidateTag } from "next/cache";

export async function invalidateCache() {
  revalidateTag("random", { expire: 0 });
}

API route (requires page refresh ❌):

import { revalidateTag } from "next/cache";

export async function GET() {
  revalidateTag("random", { expire: 0 });
  return Response.json({ revalidated: true });
}

Expected behavior

According to the documentation, { expire: 0 } should lead to immediate new values. When calling the API route, the page should automatically display the fresh cached value without requiring a manual refresh, matching the server action behavior.

Actual behavior

• Server action: Page immediately shows new value after invalidation
• API route: Cache is invalidated successfully, but page continues showing old value until manually refreshed

Question

How can I achieve the same immediate UI update behavior with API route calls as with server actions?