Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) · Les

Taggebaseerde invalidatie voor fijnmazig cache legen

Voeg cachetags toe aan fetches en invalideer na mutaties precies de getroffen gegevens.

Les 3 van 413 stappen

Taggebaseerde invalidatie voor fijnmazig cache legen is een gratis Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Fullstackontwikkeling met Next.js 15 (App Router + Server Actions). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 4 lessen.

Waarom ongeldig maken op basis van tags

In Next.js 15 bewaart de Data Cache resultaten van fetch over meerdere verzoeken en implementaties heen. De uitdaging is om na een mutatie precies de juiste items ongeldig te maken.

Revalidatie op basis van tijd (revalidate: 60) is grofmazig en wordt door de klok gestuurd.
Op basis van paden (revalidatePath) wist volledige routesegmenten.
Op basis van tags laat je afzonderlijke fetches labelen en alleen die fetches ongeldig maken, ongeacht op welke pagina ze zijn gerenderd.

Tags geven je fijnmazige, gerichte cachevernieuwing: werk één product bij en maak alleen de fetches ongeldig die dat product lezen.

Een tag aan een fetch toevoegen

Je voegt tags toe via de optie next.tags op de uitgebreide fetch. Elke tag is een gewone tekenreeks die je zelf kiest.

Hier krijgt een fetch van een productlijst twee labels: een brede tag products en een specifieke tag product-42.

De brede tag maakt de volledige collectie ongeldig.
De specifieke tag maakt één item ongeldig.

async function getProduct(id: string) {
  const res = await fetch(`https://api.shop.com/products/${id}`, {
    next: { tags: ['products', `product-${id}`] },
  });
  if (!res.ok) throw new Error('Failed to load product');
  return res.json();
}

Ongeldig maken met revalidateTag

Roep na een mutatie revalidateTag(tag) aan vanuit next/cache. Elke gecachte fetch met die tag wordt als verouderd gemarkeerd; bij het volgende verzoek worden de gegevens opnieuw opgehaald.

Dit gebeurt binnen een Server Action of een Route Handler — contexten die alleen op de server bestaan en waar mutaties plaatsvinden.

revalidateTag retourneert geen promise waarop je wacht om gegevens opnieuw op te halen; de functie markeert items alleen als verouderd.
Meerdere tags? Roep de functie één keer per tag aan.

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

export async function updateProduct(id: string, data: FormData) {
  await fetch(`https://api.shop.com/products/${id}`, {
    method: 'PATCH',
    body: JSON.stringify({ name: data.get('name') }),
  });
  // Bust only this product's cached reads
  revalidateTag(`product-${id}`);
}

Brede versus smalle tags

Ontwerp een kleine taghiërarchie, zodat je de juiste reikwijdte kunt kiezen:

products — maak de volledige catalogus ongeldig, bijvoorbeeld na een bulkimport.
product-42 — maak één item ongeldig, bijvoorbeeld na een bewerking.
product-42-reviews — maak een gerelateerd onderdeel ongeldig zonder het product zelf aan te raken.

Vuistregel: voorzie elke fetch van zowel een collectietag als een entiteitstag. Mutaties kunnen dan de kleinste tag kiezen die de wijziging omvat.

Lezingen op meerdere pagina's taggen

Een tag is globaal voor de Data Cache en is niet aan een route gekoppeld. Als zowel de homepage als de detailpagina product-42 ophalen met dezelfde tag, maakt één revalidateTag('product-42') beide ongeldig.

Dit is het belangrijkste voordeel ten opzichte van revalidatePath: je hoeft niet te weten welke pagina's de gegevens hebben gebruikt.

// app/page.tsx (home) and app/products/[id]/page.tsx both call this
export async function getProductSummary(id: string) {
  const res = await fetch(`https://api.shop.com/products/${id}`, {
    next: { tags: [`product-${id}`] },
  });
  return res.json();
}

unstable_cache voor gegevens die niet uit fetch komen

Niet alle gegevens komen uit fetch — directe databasequery's, zoals Prisma- en Drizzle-query's, omzeilen de Data Cache. Wikkel ze in unstable_cache om ondersteuning voor tags toe te voegen.

Het derde argument accepteert tags en revalidate. Dezelfde aanroep van revalidateTag maakt ook deze items ongeldig.

import { unstable_cache } from 'next/cache';
import { db } from '@/lib/db';

export const getCachedUser = unstable_cache(
  async (id: string) => db.user.findUnique({ where: { id } }),
  ['user-by-id'],
  { tags: ['users'], revalidate: 3600 },
);

Dynamische tags in unstable_cache

De key parts van de cache, het tweede argument, moeten statisch genoeg zijn om de functie te identificeren, maar vaak wil je een tag per entiteit. Bouw de tag op basis van het argument en geef deze door in de opties.

Retourneer de functie, zodat elke aanroep de juiste entiteitstag krijgt en je revalidateTag('user-7') nauwkeurig kunt gebruiken.

import { unstable_cache } from 'next/cache';
import { db } from '@/lib/db';

export function getCachedUser(id: string) {
  return unstable_cache(
    async () => db.user.findUnique({ where: { id } }),
    ['user', id],
    { tags: [`user-${id}`, 'users'] },
  )();
}

Tagnamen veilig opbouwen

Inconsistente tagtekenreeksen mislukken stilletjes — een niet-overeenkomende tag maakt niets ongeldig. Centraliseer het opbouwen van tags in pure helperfuncties, zodat lezingen en schrijfbewerkingen altijd dezelfde namen gebruiken.

Dit is zelfstandige, idiomatische TypeScript: de helpers produceren precies dezelfde tekenreeksen die zowel in next.tags als in revalidateTag worden gebruikt.

const tags = {
  products: () => 'products',
  product: (id: string) => `product-${id}`,
  productReviews: (id: string) => `product-${id}-reviews`,
};

console.log(tags.products());
console.log(tags.product('42'));
console.log(tags.productReviews('42'));

Meerdere tags atomair ongeldig maken

Eén mutatie heeft vaak gevolgen voor meerdere gecachte onderdelen. Nadat je een product hebt bijgewerkt, moet je mogelijk het item, de collectielijst en de zoekindex ongeldig maken.

Roep voor elk onderdeel revalidateTag aan. Ze worden allemaal van kracht voordat het antwoord van de actie naar de client wordt teruggestuurd.

De volgorde maakt niet uit — alles wordt als verouderd gemarkeerd.
Houd de set minimaal om onnodig opnieuw ophalen elders te voorkomen.

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

export async function publishProduct(id: string) {
  await fetch(`https://api.shop.com/products/${id}/publish`, { method: 'POST' });
  revalidateTag(`product-${id}`);
  revalidateTag('products');
  revalidateTag('search-index');
}

Tag versus pad: kiezen

revalidateTag en revalidatePath bestaan allebei voor verschillende taken:

Gebruik tags wanneer dezelfde gegevens op veel routes voorkomen of wanneer je alleen gegevens ongeldig wilt maken, en niet de aannames van een layout over de gecachte routeweergave.
Gebruik paden wanneer de volledige uitvoer van een route is gewijzigd en je daar geen tags bijhoudt.

Je kunt ze combineren: een Server Action kan beide aanroepen. Gebruik bij voorkeur tags voor gegevens en paden voor structurele wijzigingen aan volledige pagina's.

Van begin tot eind in een Server Action

Dit is de volledige cyclus: een formulier verstuurt gegevens naar een Server Action, de actie wijzigt de backend en maakt daarna de precieze tags ongeldig. Bij de volgende render van elke pagina die deze tags leest, worden automatisch actuele gegevens gebruikt.

Let op dat we zowel de entiteitstag als de collectietag ongeldig maken, omdat de bewerking ook de lijstweergave wijzigt.

'use server';
import { revalidateTag } from 'next/cache';
import { redirect } from 'next/navigation';

export async function editProduct(id: string, formData: FormData) {
  await fetch(`https://api.shop.com/products/${id}`, {
    method: 'PATCH',
    body: JSON.stringify({ name: formData.get('name') }),
    headers: { 'Content-Type': 'application/json' },
  });
  revalidateTag(`product-${id}`);
  revalidateTag('products');
  redirect(`/products/${id}`);
}

Korte controle

Een fetch voor productdetails heeft de tags ['products', 'product-42'] en wordt ook in de lijst op de homepage weergegeven met dezelfde tag. Je bewerkt alleen de naam van product 42. Wat is de meest nauwkeurige manier om beide weergaven te vernieuwen zonder andere producten onnodig ongeldig te maken?

Beantwoord dit in de interactieve les

Samenvatting

Je hebt geleerd hoe je in Next.js 15 fijnmazig caches op basis van tags vernieuwt:

Voeg tags toe via next: { tags: [...] } op fetch en via de optie tags van unstable_cache voor gegevens die niet uit fetch komen.
Gebruik een collectietag plus een tag per entiteit, zodat mutaties de kleinst mogelijke reikwijdte hebben.
Roep revalidateTag(tag) aan binnen Server Actions of Route Handlers — één keer per tag, atomair.
Tags zijn globaal: één aanroep vernieuwt de gegevens op elke route die ze heeft gelezen, in tegenstelling tot revalidatePath.
Centraliseer tagnamen in helpers, zodat lezingen en schrijfbewerkingen nooit van elkaar afwijken.

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 22
Lessen: 88

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Taggebaseerde invalidatie voor fijnmazig cache legen” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackontwikkeling met Next.js 15 (App Router + Server Actions), waaronder “Taggebaseerde invalidatie voor fijnmazig cache legen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 4 lessen.

Wat leer ik in “Taggebaseerde invalidatie voor fijnmazig cache legen”?

Voeg cachetags toe aan fetches en invalideer na mutaties precies de getroffen gegevens. Je oefent met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) te beginnen?

Ervaring vooraf is niet nodig. Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Taggebaseerde invalidatie voor fijnmazig cache legen”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)?

Ja. Elke les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

De vier caches: request, data, volledige route en router
Tijdgebaseerde en on-demand revalidatiestrategieën
Taggebaseerde invalidatie voor fijnmazig cache legen
Uitschakelen: dynamische rendering en no-store

← Terug naar Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)