What is on-demand revalidation in Next.js (revalidatePath / revalidateTag)?

Q: What is on-demand revalidation in Next.js (revalidatePath / revalidateTag)?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block names the version it ran on. ## 1. Why This Even Matters — A Story First Think of labels on jars in a pantry. revalidatePath is emptying one shelf because that shelf is out of date. revalidateTag is throwing away every jar labelled "tomato sauce", wherever it sits, because the recipe changed. Labels are the better tool when the same sauce is used on many shelves, which is exactly how shared data behaves across pages. ## 2. The Core Idea 📌 **Interview term: revalidatePath** — a next/cache

The problem

Question presented to candidate: "An editor publishes a change in the CMS and wants it live within seconds, not after the next hourly regeneration. How do you do that in Next.js, and when would you use a tag instead of a path?"

What a strong answer should cover:

revalidatePath(path) marks the cached output of one route as stale.
revalidateTag(tag, profile) marks every cached fetch or 'use cache' entry with that tag as stale, across all routes that use it.
In Next.js 16 revalidateTag takes a second argument; with 'max' the next request is served stale while it refreshes, with { expire: 0 } it refetches immediately. The single-argument form is deprecated.
updateTag expires a tag immediately for read-your-own-writes, but only inside Server Actions.
Trigger them from a Server Action after a mutation, or from a Route Handler used as a webhook.

Clarifying questions expected:

"Is the change triggered by our own form or by an external system?" — Server Action versus webhook Route Handler.
"Must the editor see the change on the very next request?" — decides between max, expire: 0 and updateTag.

Code / implementation expected: Yes — tagging a fetch, a webhook that revalidates it, and a Server Action.

nextjs
revalidation
revalidatetag
caching

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block names the version it ran on.

1. Why This Even Matters — A Story First

Think of labels on jars in a pantry. revalidatePath is emptying one shelf because that shelf is out of date. revalidateTag is throwing away every jar labelled "tomato sauce", wherever it sits, because the recipe changed. Labels are the better tool when the same sauce is used on many shelves, which is exactly how shared da

The solution is hidden so you can try first

6 min read · 8 sections

Read the code

Tagging data, a webhook, and a Server Action

// lib/posts.ts
export async function getPosts() {
  return fetch("https://cms.example.com/posts", { next: { tags: ["posts"] } }).then((r) => r.json());
}

// app/api/cms-webhook/route.ts
import { revalidateTag } from "next/cache";
export async function POST(req: Request) {
  if (req.headers.get("x-secret") !== process.env.CMS_SECRET) return new Response("no", { status: 401 });
  revalidateTag("posts", "max"); // serve stale once, refresh in the background
  return Response.json({ ok: true });
}

// app/admin/actions.ts
"use server";
import { updateTag } from "next/cache";
export async function savePost(formData: FormData) {
  await db.post.update({ /* ... */ });
  updateTag("posts"); // the editor sees their own change immediately
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.