Revalidating cached data

Old copies, new copies

To revalidate a cached copy is to replace it with a new one. Next.js does it in two ways: by time, when a copy's lifetime runs out (Cache lifetimes and tags set those lifetimes), and on demand, when your code says the data changed. Here is the first one, recorded. The tea shop's price list now has a profile with a very short revalidate, 10 seconds, so a recording can show it. This is a real Next.js 16.4.3 project, built with next build and run with next start:

1import { cacheLife } from "next/cache";2 3const api = process.env.SUPPLIER_API_URL;4 5export type Tea = { id: string; name: string; price: number };6 7export async function getPrices(): Promise<Tea[]> {8  "use cache";9  cacheLife("priceList");10  const response = await fetch(`${api}/prices`);11  return response.json();12}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preload" as="script" fetchpriority="low" href="/_next/static/chunks/3cfn99dbrcvvp.js">
    <script src="/_next/static/chunks/1j_b1xq_woyiy.js" async=""></script>
    <script src="/_next/static/chunks/2ki52vdnbo2ft.js" async=""></script>
    <script src="/_next/static/chunks/turbopack-3-ry682tkyiqk.js" async=""></script>
    <script src="/_next/static/chunks/1tq6ppe__m8m-.js" async=""></script>
    <title>Tea shop</title>
    <script src="/_next/static/chunks/0cz1d0mv5g_q7.js" nomodule=""></script>
  </head>
  <body>
    <div hidden="">
      <!--$-->
      <!--/$-->
    </div>
    <!--&-->
    <!--&-->
    <main>
      <h1>Our teas</h1>
      <ul>
        <li>Green tea<!-- -->: $<!-- -->4</li>
        <li>Mint tea<!-- -->: $<!-- -->3</li>
      </ul>
    </main>
    <!--$-->
    <!--/$-->
    <!--/&-->
    <!--/&-->
    <script id="_R_">…</script>
    <script src="/_next/static/chunks/3cfn99dbrcvvp.js" async=""></script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
  </body>
</html>

Line 9 of lib/supplier.ts uses the priceList profile, which line 7 of next.config.ts defines as { revalidate: 10, expire: 3600 }. The build printed ○ /teas 10s 1h: the legend says (Static) prerendered as static content, so the page was prerendered and saved, and it can be made again after 10 seconds.

Two Route Handlers are only there for the recording, so its clock doesn't depend on how fast a computer is. app/api/revalidate/route.ts accepts a call signed with the shop's secret, and expires /teas with revalidatePath: the page is then made again on the next visit, at a moment the recording knows. app/api/wait/route.ts answers after 11 seconds, so the request after it comes at least 11 seconds later on any computer.

The recorder made the signed call, visited /teas twice in a row, called /api/wait, and visited once more. All three visits show the same prices. The difference is in one header, x-nextjs-cache, which Next.js adds to a prerendered page's answer. The first visit says MISS: the page had just been expired, so it waited while a new one was made. The second says HIT: that new page, still fresh. The Network tab is open on the last one, 11 seconds later: STALE. Each row is one value it had in these recordings:

STALE is stale-while-revalidate: the copy is out of date, but the visit still gets it at once, and that visit starts making a new one in the background. The supplier's stand-in API kept a list of the requests it got: one during the build, one for the MISS, and one more, sent by that background work. The HIT asked for nothing. Nothing happened at the 10-second mark itself: a page is only made again when a request finds it stale. A later visit gets the new page, once it's ready.

Time-based revalidation

The page above shows what a lifetime does to a prerendered page. A cached result can also live in a hole: a part of the page made for each request, like a short-lived price list inside Suspense. Its copy isn't kept in a page file; Next.js keeps it in a cache handler, the part that stores "use cache" results while the server runs. Here the price list lives for 10 seconds, and expires after 60, so it's a hole:

1import { cacheLife } from "next/cache";2 3const api = process.env.SUPPLIER_API_URL;4 5export type Tea = { id: string; name: string; price: number };6 7export async function getPrices(): Promise<Tea[]> {8  "use cache";9  cacheLife({ revalidate: 10, expire: 60 });10  const response = await fetch(`${api}/prices`);11  return response.json();12}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preload" as="script" fetchpriority="low" href="/_next/static/chunks/3cfn99dbrcvvp.js">
    <script src="/_next/static/chunks/1j_b1xq_woyiy.js" async=""></script>
    <script src="/_next/static/chunks/2ki52vdnbo2ft.js" async=""></script>
    <script src="/_next/static/chunks/turbopack-3-ry682tkyiqk.js" async=""></script>
    <script src="/_next/static/chunks/1tq6ppe__m8m-.js" async=""></script>
    <title>Tea shop</title>
    <script src="/_next/static/chunks/0cz1d0mv5g_q7.js" nomodule=""></script>
  </head>
  <body>
    <div hidden="">
      <!--$-->
      <!--/$-->
    </div>
    <!--&-->
    <!--&-->
    <main>
      <h1>Our teas</h1>
      <!--$?-->
      <template id="B:0"></template>
      <p>Loading prices…</p>
      <!--/$-->
    </main>
    <!--$-->
    <!--/$-->
    <!--/&-->
    <!--/&-->
    <script>…</script>
    <script id="_R_">…</script>
    <script src="/_next/static/chunks/3cfn99dbrcvvp.js" async=""></script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script src="/_next/static/chunks/0cz1d0mv5g_q7.js" nomodule=""></script>
    <div hidden="" id="S:0">
      <ul>
        <li>Green tea<!-- -->: $<!-- -->4</li>
        <li>Mint tea<!-- -->: $<!-- -->3</li>
      </ul>
    </div>
    <script>…</script>
    <script>…</script>
  </body>
</html>

Line 9 is cacheLife({ revalidate: 10, expire: 60 }), and the build printed ◐ /teas. The recorder visited twice, waited 11 seconds, and visited again. All three visits show the same prices, and the stand-in supplier tells what happened behind them: it was asked once during the build, and twice during the visits. The first visit filled the cache. The second visit used that copy. The third came after revalidate, and asked the supplier again.

That third visit didn't get the old copy first. In Next.js 16.4.3, the default cache handler keeps entries in the server's memory, and when it runs in production it drops an entry once its revalidate has passed. A request then finds nothing, and waits while getPrices runs again. That's this version's default handler, not a promise of the API: cacheLife only says when a copy may be refreshed in the background and when a request must wait, and other handlers, like the remote ones in Private and remote caches, may keep a stale entry and refresh it in the background. Each row compares the two places a copy can live, as recorded here:

Expire works the same way on both: once it has passed with no request in between, nothing old may be sent, and the request waits. A real price list would have an expire of hours, so a recording would have to wait hours; the source shows the check, linked at the end. Time-based revalidation fits data that changes on its own, with nobody to tell you: a weather box, a rate from another company's API. When something can tell you, revalidate on demand.

revalidateTag from a webhook

The tea supplier can tell the shop when prices change: it calls a webhook, an address on the shop's server, with the new prices. In these recordings, the shop stores them in data/prices.json, and getPrices reads that file, cached for hours and tagged price-list. The file stands in for a database so the recording needs nothing else; a real shop writes to shared, lasting storage, because many hosts run several copies of the app on file systems that are read-only or wiped on each deploy. Here is the webhook, a Route Handler (Route Handlers built one), in its first version:

import { createHmac, timingSafeEqual } from "node:crypto";
import { writeFile } from "node:fs/promises";
import { revalidateTag } from "next/cache";

function isSigned(body: string, signature: string | null) {
  if (!signature || !/^[0-9a-f]{64}$/i.test(signature)) return false;
  const expected = createHmac("sha256", process.env.SUPPLIER_SECRET!).update(body).digest();
  const received = Buffer.from(signature, "hex");
  return received.length === expected.length && timingSafeEqual(received, expected);
}

export async function POST(request: Request) {
  const body = await request.text();
  if (!isSigned(body, request.headers.get("x-signature"))) {
    return Response.json({ error: "Bad signature" }, { status: 401 });
  }
  const prices = JSON.parse(body);
  await writeFile("data/prices.json", JSON.stringify(prices));

  revalidateTag("price-list", "max");
  return Response.json({ received: true });
}

Anyone can send a request to this address, so a webhook that changes data must check that it really comes from the supplier. Lines 5 to 10 do it the way Route Handlers showed: isSigned computes an HMAC, a code made from the exact body and the secret the shop and the supplier share, checks that the x-signature header is 64 hex characters, and compares the two with timingSafeEqual, which takes the same time whatever the first difference. Line 12 answers POST requests, and line 14 turns away any request without a valid signature with 401. Lines 17 and 18 read the new prices and save them. Line 20 tells Next.js the price list changed. Its second argument is a cacheLife profile, and Next.js uses only that profile's expire: the tag goes stale at once, and old copies may still be sent until expire has passed. The recorder called the webhook three times: with no signature and with a header that isn't one (both 401), then signed. Try each version of line 20, and before you click, guess what the visit right after the webhook shows.

1import { createHmac, timingSafeEqual } from "node:crypto";2import { writeFile } from "node:fs/promises";3import { revalidateTag } from "next/cache";4 5function isSigned(body: string, signature: string | null) {6  if (!signature || !/^[0-9a-f]{64}$/i.test(signature)) return false;7  const expected = createHmac("sha256", process.env.SUPPLIER_SECRET!).update(body).digest();8  const received = Buffer.from(signature, "hex");9  return received.length === expected.length && timingSafeEqual(received, expected);10}11 12export async function POST(request: Request) {13  const body = await request.text();14  if (!isSigned(body, request.headers.get("x-signature"))) {15    return Response.json({ error: "Bad signature" }, { status: 401 });16  }17  const prices = JSON.parse(body);18  await writeFile("data/prices.json", JSON.stringify(prices));19 20  revalidateTag("price-list", "max");21  return Response.json({ received: true });22}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preload" as="script" fetchpriority="low" href="/_next/static/chunks/3cfn99dbrcvvp.js">
    <script src="/_next/static/chunks/1j_b1xq_woyiy.js" async=""></script>
    <script src="/_next/static/chunks/2ki52vdnbo2ft.js" async=""></script>
    <script src="/_next/static/chunks/turbopack-3-ry682tkyiqk.js" async=""></script>
    <script src="/_next/static/chunks/1tq6ppe__m8m-.js" async=""></script>
    <title>Tea shop</title>
    <script src="/_next/static/chunks/0cz1d0mv5g_q7.js" nomodule=""></script>
  </head>
  <body>
    <div hidden="">
      <!--$-->
      <!--/$-->
    </div>
    <!--&-->
    <!--&-->
    <main>
      <h1>Our teas</h1>
      <ul>
        <li>Green tea<!-- -->: $<!-- -->4</li>
        <li>Mint tea<!-- -->: $<!-- -->3</li>
      </ul>
    </main>
    <!--$-->
    <!--/$-->
    <!--/&-->
    <!--/&-->
    <script id="_R_">…</script>
    <script src="/_next/static/chunks/3cfn99dbrcvvp.js" async=""></script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
  </body>
</html>

Each row is one version of line 20: what it does to the tag, and what the recorded visit right after got.

Three things to notice:

• "max" is the usual choice, and the one the docs recommend: its expire is a year, so for a year after the call, a request finds an old copy it may send and needn't wait; the visit after the new page is ready shows the new prices. Past expire, the next request would wait. "hours" behaved the same here, because only its expire, a day, counts.
• { expire: 0 } is for data that must never be shown old: the next visit waits, and gets Mint tea: $4.
• The one-argument form is from before Next.js 16, whose release post says the second argument is now required. In a TypeScript file, it doesn't build: the recorded build stopped at line 20 with Expected 2 arguments, but got 1. In a JavaScript file, it still runs, prints "revalidateTag" without the second argument is now deprecated, add second argument of "max" or use "updateTag", and expires the tag at once. Add "max" when you update old code.

Where each call may run

The last version of the webhook called updateTag. The signed call answered 500, and next start printed Error: updateTag can only be called from within a Server Action. To invalidate cache tags in Route Handlers or other contexts, use revalidateTag instead. The file was already saved, but nothing expired, so /teas kept the old prices.

updateTag expires a tag at once, like { expire: 0 }, and inside a Server Action it also sends the page back, rendered again, in the action's own answer: the person who made the change sees it right away. Updating the UI after a mutation recorded that flow, with revalidatePath, refresh() and redirect(). A webhook has nobody waiting for a page, so it uses revalidateTag.

None of these calls may run while a page renders. This page tries:

1import { revalidateTag } from "next/cache";2import { getPrices } from "@/lib/shop";3 4export default async function TeasPage() {5  revalidateTag("price-list", "max");6  const teas = await getPrices();7  return (8    <main>9      <h1>{teas.length} teas</h1>10    </main>11  );12}

$ next build▲ Next.js 16.4.3 (Turbopack)- Cache Components enabled- Partial Prefetching enabled   Creating an optimized production build ...✓ Compiled successfully  Running TypeScript ...  Finished TypeScript ...  Collecting page data ...Error occurred prerendering page "/teas". Read more: https://nextjs.org/docs/messages/prerender-errorError: Route "/teas": `revalidateTag("price-list")` can't be called during render. Call it from a Server Action or Route Handler instead.Learn more: https://nextjs.org/docs/messages/revalidate-in-use-cache    at e (app/teas/page.tsx:5:3)  3 |  4 | export default async function TeasPage() {> 5 |   revalidateTag("price-list", "max");    |   ^  6 |   const teas = await getPrices();  7 |   return (  8 |     <main> {  digest: '2424803203'}Export encountered an error on /teas/page: /teas, exiting the build.⨯ Next.js build worker exited with code: 1 and signal: null

Line 5 runs while TeasPage renders, and the build stops there: revalidateTag("price-list") can't be called during render. Call it from a Server Action or Route Handler instead. Rendering reads data; changing what's cached belongs to the code that changes the data. Inside a "use cache" function, the same calls stop with can't be called inside a cached function. Each row is one call, and where it may run:

How far revalidatePath reaches

revalidatePath names pages by their address instead of a tag, and expires everything cached for them at once, so the next visit waits for new data. The shop now has three pages that use the prices: the home page with the cheapest tea, /teas, and /teas/offers, which sells two boxes of each tea. app/teas/layout.tsx is a layout around the two teas pages (Layouts and pages covered layouts). Before you click, guess which pages the first version reaches.

1import { createHmac, timingSafeEqual } from "node:crypto";2import { writeFile } from "node:fs/promises";3import { revalidatePath } from "next/cache";4 5function isSigned(body: string, signature: string | null) {6  if (!signature || !/^[0-9a-f]{64}$/i.test(signature)) return false;7  const expected = createHmac("sha256", process.env.SUPPLIER_SECRET!).update(body).digest();8  const received = Buffer.from(signature, "hex");9  return received.length === expected.length && timingSafeEqual(received, expected);10}11 12export async function POST(request: Request) {13  const body = await request.text();14  if (!isSigned(body, request.headers.get("x-signature"))) {15    return Response.json({ error: "Bad signature" }, { status: 401 });16  }17  const prices = JSON.parse(body);18  await writeFile("data/prices.json", JSON.stringify(prices));19 20  revalidatePath("/teas");21  return Response.json({ received: true });22}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preload" as="script" fetchpriority="low" href="/_next/static/chunks/3cfn99dbrcvvp.js">
    <script src="/_next/static/chunks/1j_b1xq_woyiy.js" async=""></script>
    <script src="/_next/static/chunks/2ki52vdnbo2ft.js" async=""></script>
    <script src="/_next/static/chunks/turbopack-3-ry682tkyiqk.js" async=""></script>
    <script src="/_next/static/chunks/1tq6ppe__m8m-.js" async=""></script>
    <title>Tea shop</title>
    <script src="/_next/static/chunks/0cz1d0mv5g_q7.js" nomodule=""></script>
  </head>
  <body>
    <div hidden="">
      <!--$-->
      <!--/$-->
    </div>
    <!--&-->
    <section>
      <p>Prices from our supplier.</p>
      <!--&-->
      <!--&-->
      <main>
        <h1>Offers</h1>
        <ul>
          <li>Two boxes of <!-- -->Green tea<!-- -->: $<!-- -->8</li>
          <li>Two boxes of <!-- -->Mint tea<!-- -->: $<!-- -->6</li>
        </ul>
      </main>
      <!--$-->
      <!--/$-->
      <!--/&-->
      <!--/&-->
    </section>
    <!--/&-->
    <script id="_R_">…</script>
    <script src="/_next/static/chunks/3cfn99dbrcvvp.js" async=""></script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
  </body>
</html>

Each row is one call, and what each page showed on the visit after the webhook:

Its second argument, the type, decides the reach. Without one, or with "page", the path names one page. With "layout", it names a layout, and reaches every page under it. So revalidatePath("/", "layout") expires everything cached for the whole app.

A dynamic route, like app/teas/[id]/page.tsx with a page for each tea (Dynamic routes), needs the type. Its folder name, /teas/[id], isn't an address anyone visits:

1import { createHmac, timingSafeEqual } from "node:crypto";2import { writeFile } from "node:fs/promises";3import { revalidatePath } from "next/cache";4 5function isSigned(body: string, signature: string | null) {6  if (!signature || !/^[0-9a-f]{64}$/i.test(signature)) return false;7  const expected = createHmac("sha256", process.env.SUPPLIER_SECRET!).update(body).digest();8  const received = Buffer.from(signature, "hex");9  return received.length === expected.length && timingSafeEqual(received, expected);10}11 12export async function POST(request: Request) {13  const body = await request.text();14  if (!isSigned(body, request.headers.get("x-signature"))) {15    return Response.json({ error: "Bad signature" }, { status: 401 });16  }17  const prices = JSON.parse(body);18  await writeFile("data/prices.json", JSON.stringify(prices));19 20  revalidatePath("/teas/[id]");21  return Response.json({ received: true });22}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preload" as="script" fetchpriority="low" href="/_next/static/chunks/3cfn99dbrcvvp.js">
    <script src="/_next/static/chunks/1j_b1xq_woyiy.js" async=""></script>
    <script src="/_next/static/chunks/2ki52vdnbo2ft.js" async=""></script>
    <script src="/_next/static/chunks/turbopack-3-ry682tkyiqk.js" async=""></script>
    <script src="/_next/static/chunks/1tq6ppe__m8m-.js" async=""></script>
    <title>Tea shop</title>
    <script src="/_next/static/chunks/0cz1d0mv5g_q7.js" nomodule=""></script>
  </head>
  <body>
    <div hidden="">
      <!--$-->
      <!--/$-->
    </div>
    <!--&-->
    <!--&-->
    <!--&-->
    <main>
      <!--$-->
      <h1>Mint tea</h1>
      <p>Price: $<!-- -->3</p>
      <!--/$-->
    </main>
    <!--$-->
    <!--/$-->
    <!--/&-->
    <!--/&-->
    <!--/&-->
    <script id="_R_">…</script>
    <script src="/_next/static/chunks/3cfn99dbrcvvp.js" async=""></script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
  </body>
</html>

Without a type, next start printed Warning: a dynamic page path "/teas/[id]" was passed to "revalidatePath", but the "type" parameter is missing. This has no effect by default, and both teas kept their old prices. With "page", both show the new ones. A real address, like "/teas/mint", names one tea's page. The docs prefer tags when you have them: a tag says exactly which data changed, wherever it's used; a path says which pages to make again.

refresh() for data that isn't cached

Not every change is to cached data. A count of today's orders, read for each request with nothing cached in between, is always current on the server; only the page already on the visitor's screen is old. refresh(), from next/cache, is for that. It expires nothing. Called in a Server Action, it asks Next.js to render the current page again and send it back in the action's answer:

"use server";

import { refresh } from "next/cache";
import { markPacked } from "@/lib/orders";

export async function packOrder(id: string) {
  await markPacked(id);
  refresh();
}

Line 1 makes the file's functions Server Actions (Server Actions). Line 7 saves the change, and line 8 calls refresh(). The parts of the page that read data for each request come back new; cached parts come back as they were. Updating the UI after a mutation recorded exactly that: the saved count went up, and the cached list didn't change. Like updateTag, refresh() only works in a Server Action: anywhere else it throws refresh can only be called from within a Server Action.

Choosing how a copy is replaced

Ask two questions about each piece of cached data. Does anything tell you when it changes? And may a visitor see the old version once more? Sort these parts of the tea shop:

Most real apps mix them: a lifetime as a safety net for every cached result, a tag for each kind of data, "max" from webhooks, and updateTag in the actions where someone waits for their own change.

Common mix-ups

• "After revalidateTag with "max", the next visit shows the new data." No. The next visit gets the old copy, marked STALE, and starts a new one. A later visit gets the new data, once it's ready.
• "A page with a revalidate of 10 seconds is made again every 10 seconds." No. Nothing happens while nobody visits. The first request after revalidate starts the new page.
• "Every cached result is served stale while it refreshes." Not always. In Next.js 16.4.3, the default in-memory handler drops a result once its revalidate has passed, in production, and the request waits.
• "updateTag works in a webhook." No. It throws in a Route Handler, and the request answers 500. Use revalidateTag there.
• "revalidatePath("/teas") refreshes everything under /teas." Only with "layout". Without it, /teas/offers kept its old prices.
• "refresh() clears the cache." No. It renders the page again and expires nothing.
• "A webhook only needs a secret address." No. Anyone who learns the address can call it. Check who is asking on every request, as lines 5 to 10 and 14 do.

Practice exercises

These exercises are about Next.js projects, which can't run inside this page. Answer first, then use the hints.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
  cacheLife: {
    priceList: { revalidate: 10, expire: 3600 },
  },
};

export default nextConfig;

import { cacheLife } from "next/cache";

const api = process.env.SUPPLIER_API_URL;

export type Tea = { id: string; name: string; price: number };

export async function getPrices(): Promise<Tea[]> {
  "use cache";
  cacheLife({ revalidate: 10, expire: 60 });
  const response = await fetch(`${api}/prices`);
  return response.json();
}

import { createHmac, timingSafeEqual } from "node:crypto";
import { writeFile } from "node:fs/promises";
import { revalidateTag } from "next/cache";

function isSigned(body: string, signature: string | null) {
  if (!signature || !/^[0-9a-f]{64}$/i.test(signature)) return false;
  const expected = createHmac("sha256", process.env.SUPPLIER_SECRET!).update(body).digest();
  const received = Buffer.from(signature, "hex");
  return received.length === expected.length && timingSafeEqual(received, expected);
}

export async function POST(request: Request) {
  const body = await request.text();
  if (!isSigned(body, request.headers.get("x-signature"))) {
    return Response.json({ error: "Bad signature" }, { status: 401 });
  }
  const prices = JSON.parse(body);
  await writeFile("data/prices.json", JSON.stringify(prices));

  revalidateTag("price-list", "max");
  return Response.json({ received: true });
}

import { createHmac, timingSafeEqual } from "node:crypto";
import { writeFile } from "node:fs/promises";
import { revalidatePath } from "next/cache";

function isSigned(body: string, signature: string | null) {
  if (!signature || !/^[0-9a-f]{64}$/i.test(signature)) return false;
  const expected = createHmac("sha256", process.env.SUPPLIER_SECRET!).update(body).digest();
  const received = Buffer.from(signature, "hex");
  return received.length === expected.length && timingSafeEqual(received, expected);
}

export async function POST(request: Request) {
  const body = await request.text();
  if (!isSigned(body, request.headers.get("x-signature"))) {
    return Response.json({ error: "Bad signature" }, { status: 401 });
  }
  const prices = JSON.parse(body);
  await writeFile("data/prices.json", JSON.stringify(prices));

  revalidatePath("/teas/[id]");
  return Response.json({ received: true });
}

import { createHmac, timingSafeEqual } from "node:crypto";
import { writeFile } from "node:fs/promises";
import { revalidatePath } from "next/cache";

function isSigned(body: string, signature: string | null) {
  if (!signature || !/^[0-9a-f]{64}$/i.test(signature)) return false;
  const expected = createHmac("sha256", process.env.SUPPLIER_SECRET!).update(body).digest();
  const received = Buffer.from(signature, "hex");
  return received.length === expected.length && timingSafeEqual(received, expected);
}

export async function POST(request: Request) {
  const body = await request.text();
  if (!isSigned(body, request.headers.get("x-signature"))) {
    return Response.json({ error: "Bad signature" }, { status: 401 });
  }
  const prices = JSON.parse(body);
  await writeFile("data/prices.json", JSON.stringify(prices));

  revalidatePath("/teas/[id]", "page");
  return Response.json({ received: true });
}

import { createHmac, timingSafeEqual } from "node:crypto";
import { writeFile } from "node:fs/promises";
import { revalidatePath } from "next/cache";

function isSigned(body: string, signature: string | null) {
  if (!signature || !/^[0-9a-f]{64}$/i.test(signature)) return false;
  const expected = createHmac("sha256", process.env.SUPPLIER_SECRET!).update(body).digest();
  const received = Buffer.from(signature, "hex");
  return received.length === expected.length && timingSafeEqual(received, expected);
}

export async function POST(request: Request) {
  const body = await request.text();
  if (!isSigned(body, request.headers.get("x-signature"))) {
    return Response.json({ error: "Bad signature" }, { status: 401 });
  }
  const prices = JSON.parse(body);
  await writeFile("data/prices.json", JSON.stringify(prices));

  revalidatePath("/teas", "layout");
  return Response.json({ received: true });
}

import { createHmac, timingSafeEqual } from "node:crypto";
import { writeFile } from "node:fs/promises";
import { revalidateTag } from "next/cache";

function isSigned(body, signature) {
  if (!signature || !/^[0-9a-f]{64}$/i.test(signature)) return false;
  const expected = createHmac("sha256", process.env.SUPPLIER_SECRET).update(body).digest();
  const received = Buffer.from(signature, "hex");
  return received.length === expected.length && timingSafeEqual(received, expected);
}

export async function POST(request) {
  const body = await request.text();
  if (!isSigned(body, request.headers.get("x-signature"))) {
    return Response.json({ error: "Bad signature" }, { status: 401 });
  }
  const prices = JSON.parse(body);
  await writeFile("data/prices.json", JSON.stringify(prices));

  revalidateTag("price-list");
  return Response.json({ received: true });
}

Check your understanding

For each question, ask who waits: the visitor, or nobody.

Key takeaways

• A prerendered page past its revalidate is still sent once (STALE) and a new one is started by that request. A later visit gets the new page.
• Nothing is remade while nobody visits. Past expire, the next request waits.
• In Next.js 16.4.3, the default in-memory handler drops a hole's cached result once its revalidate has passed, in production, so that request waits.
• From a webhook, call revalidateTag(tag, "max") so requests within its year-long window needn't wait, or { expire: 0 } when old data must never be shown again. Only the profile's expire counts.
• updateTag and refresh() only run in Server Actions; no revalidating call runs during render.
• revalidatePath reaches one page, or every page under a layout with "layout"; a dynamic route needs "page".

Coming next: Private and remote caches. "use cache: private" keeps results for one visitor, "use cache: remote" shares them through a store outside the server, and cache handlers decide where cached data lives.