revalidateTag (invalidation du cache fetch)

fetch(url, { next: { tags: ["demo"] } }) côté serveur met en cache la réponse amont et l'indexe par tag. En cliquant sur le bouton, un POST est envoyé à une action serveur qui appelle revalidateTag("demo") — chaque entrée taguée "demo" est supprimée de FetchCache ; le prochain rendu de page re-récupère depuis l'amont.

Astuce
<code>revalidateTag</code> retourne le nombre d'entrées supprimées. Si vous obtenez <strong>0</strong> alors que le cache semblait actif, vérifiez que le tag dans le <code>fetch</code> et dans l'appel <code>revalidateTag</code> sont identiques au caractère près — la correspondance est sensible à la casse. L'invalidation ne traverse pas les workers : en cas de redémarrage du serveur, le cache est déjà vide.

Résultat

Externe (direct): 2026-06-17T13:15:31.686Z

receivedAt mis en cache: 2026-06-17T13:15:31.718Z

Comment lire ceci

  1. Rechargez plusieurs fois : l'horodatage externe s'actualise en direct, le receivedAt mis en cache reste figé (dans la limite du TTL de 60 s).
  2. Cliquez sur le bouton : l'action s'exécute côté serveur, revalidateTag("demo") supprime l'entrée mise en cache et indique combien d'entrées ont été supprimées.
  3. Le rechargement du loader après l'action refait une requête fraîche — le prochain receivedAt affiché est l'horodatage post-invalidation.
src/app/examples/revalidate-tag/page.tsxTSX
import { revalidateTag } from "@bext-stack/framework/cache";

export const dynamic = "force-dynamic";

export async function action({ request }: { request: Request }) {
  const removed = revalidateTag("demo"); // returns count dropped
  return { ok: true, removed };
}

export default async function Page({ actionData }: any) {
  // Cached upstream fetch — receivedAt stays frozen until the tag
  // is invalidated.
  const r = await fetch("https://demo.bext.dev/api/echo?key=revalidate-tag", {
    next: { revalidate: 60, tags: ["demo"] },
  });
  const data = await r.json();
  return (
    <div>
      <p>Outer (live): {new Date().toISOString()}</p>
      <p>Cached receivedAt: <strong>{data.receivedAt}</strong></p>
      <form method="post">
        <button type="submit">revalidateTag("demo")</button>
      </form>
      {actionData?.ok ? <p>Invalidated {actionData.removed} entries</p> : null}
    </div>
  );
}

Documentation associée

Mise en cache