Frontend Beauty
ESC

Type to search the knowledge base.

Revalidate Path and Tag

revalidatePath and revalidateTag invalidate cached data and routes after mutations in the App Router.

advanced3 min read
  • nextjs
  • revalidate-path

When you mutate data, cached pages and fetch results must update. revalidatePath and revalidateTag are the primary on-demand invalidation APIs for the App Router Data Cache / Full Route Cache.

Docs: revalidatePath, revalidateTag.

Tag-based (preferred for data)

// fetch
await fetch(`https://api.example.com/posts/${id}`, {
  next: { tags: [`post-${id}`, 'posts'] },
});

// after mutation (Server Action or Route Handler)
import { revalidateTag } from 'next/cache';
revalidateTag('posts');
revalidateTag(`post-${id}`);

One tag can cover many pages that reused the same fetch.

Path-based

import { revalidatePath } from 'next/cache';

revalidatePath('/blog'); // that path
revalidatePath('/blog/[slug]', 'page'); // type option variants per docs
revalidatePath('/dashboard', 'layout'); // invalidate layout subtree

Use when you think in routes rather than data dependencies.

Where to call

Server Actions, Route Handlers, and secure webhook endpoints. Never expose unauthenticated revalidation URLs without secrets.

// app/api/revalidate/route.ts
import { revalidateTag } from 'next/cache';
import { NextRequest } from 'next/server';

export async function POST(req: NextRequest) {
  const secret = req.headers.get('x-revalidate-secret');
  if (secret !== process.env.REVALIDATE_SECRET) {
    return new Response('Unauthorized', { status: 401 });
  }
  const { tag } = await req.json();
  revalidateTag(tag);
  return Response.json({ revalidated: true });
}

Interview out-loud

“After mutations I revalidateTag for data-driven caches and revalidatePath for specific routes or layouts. I tag fetches at read time so publish webhooks can invalidate precisely. Revalidation endpoints must be authenticated.”

Further reading

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Quick self-test

Explain the concept in 60 seconds, write a minimal code sample from memory, name one footgun, and point to the primary docs. If any of those fail, reread the worked example and rebuild it in a scratch file until the model sticks under interview pressure.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides