Fullstackwebapps met Next.js 15 · Les

Strategieën voor caching aan de serverzijde

Leer gegevens op de server cachen met `fetch`-opties en revalidatie om de prestaties te verbeteren.

Les 3 van 411 stappen

Strategieën voor caching aan de serverzijde is een gratis Fullstackwebapps met Next.js 15-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 Fullstackwebapps met Next.js 15. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.

Waarom caching aan de serverzijde?

In Next.js is caching aan de serverzijde cruciaal voor het bouwen van snelle en efficiënte webapplicaties. Het helpt laadtijden en de belasting van de server te verminderen.

Prestaties: Levert inhoud sneller aan gebruikers.
Kostenverlaging: Minder frequente gegevensophaling betekent minder API-aanroepen en kan geld besparen.
Schaalbaarheid: Kan meer gebruikers verwerken zonder je backend te overbelasten.

We bekijken hoe Next.js de systeemeigen fetch-API gebruikt voor krachtige caching.

Standaardinstellingen voor Next.js `fetch` en caching

Wanneer je de systeemeigen fetch-API gebruikt in Server Components van Next.js, worden gegevens standaard automatisch in de cache opgeslagen. Het is alsof je een ingebouwde gegevensstore hebt.

Standaard worden fetch-verzoeken gecachet met de strategie 'force-cache'. Dat betekent dat Next.js eerst zoekt naar een antwoord in de cache en dat gebruikt als het beschikbaar is. Alleen als er geen cache-item bestaat, worden nieuwe gegevens opgehaald.

Cache uitschakelen: `cache: 'no-store'`

Soms moet je ervoor zorgen dat gegevens altijd actueel zijn, bijvoorbeeld voor realtime dashboards of gevoelige gebruikersinformatie. In zulke gevallen kun je caching voor specifieke fetch-verzoeken uitschakelen.

Met cache: 'no-store' geef je Next.js de opdracht om altijd actuele gegevens van de oorspronkelijke server op te halen en deze nooit in de cache op te slaan. Dit is handig voor zeer dynamische of vaak veranderende inhoud.

`no-store` in actie

Zo gebruik je cache: 'no-store' in een Server Component om ervoor te zorgen dat je altijd de nieuwste gebruikersgegevens krijgt.

async function getUserProfile(userId) {
  const res = await fetch(`https://api.example.com/users/${userId}`, {
    cache: 'no-store' // Always fetch fresh data
  });
  if (!res.ok) {
    throw new Error('Failed to fetch user profile');
  }
  return res.json();
}

export default async function ProfilePage({ params }) {
  const user = await getUserProfile(params.userId);
  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

Op tijd gebaseerde hervalidatie

Voor gegevens die periodiek maar niet voortdurend veranderen, kun je op tijd gebaseerde hervalidatie gebruiken. Deze strategie wordt ook wel "verouderd blijven terwijl opnieuw valideren" genoemd.

Je kunt een optie revalidate instellen binnen de eigenschap next van fetch. Hiermee geef je Next.js op hoe vaak (in seconden) gegevens op de achtergrond opnieuw moeten worden opgehaald, terwijl in de tussentijd gegevens uit de cache worden aangeboden.

next: { revalidate: 60 }: Gegevens worden maximaal elke 60 seconden opnieuw opgehaald.

Voorbeeld van de optie voor hervalidatie

Stel dat je een blogbericht hebt dat elke paar minuten wordt bijgewerkt. Je kunt revalidate gebruiken om het actueel te houden zonder de API bij elk afzonderlijk verzoek aan te spreken.

async function getBlogPost(slug) {
  const res = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { revalidate: 3600 } // Revalidate every hour
  });
  if (!res.ok) {
    throw new Error('Failed to fetch blog post');
  }
  return res.json();
}

export default async function BlogPostPage({ params }) {
  const post = await getBlogPost(params.slug);
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

Hervalidatie op aanvraag

Wat als je gegevens in de cache direct na een wijziging wilt bijwerken, bijvoorbeeld wanneer een gebruiker een nieuw bericht publiceert? Dan komt hervalidatie op aanvraag van pas.

Next.js biedt hiervoor twee functies:

revalidatePath('/path'): Maakt de cache voor een specifiek pad ongeldig.
revalidateTag('tag'): Maakt de cache ongeldig voor alle fetch-aanroepen die aan een specifieke tag zijn gekoppeld.

Je gebruikt deze functies meestal in Server Actions of API Routes nadat gegevens zijn gewijzigd.

`revalidateTag` gebruiken

Om revalidateTag te gebruiken, moet je eerst tags toevoegen aan je fetch-verzoeken. Vervolgens kun je vanuit een Server Action of API Route een hervalidatie voor die tag starten.

Zo krijg je nauwkeurige controle over je cache en verwijder je alleen wat nodig is wanneer gegevens daadwerkelijk veranderen.

async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { tags: ['products'] } // Tag this fetch request
  });
  if (!res.ok) {
    throw new Error('Failed to fetch products');
  }
  return res.json();
}

// In a Server Action or API Route after adding/updating a product:
// import { revalidateTag } from 'next/cache';
// revalidateTag('products'); // Invalidate all fetches tagged 'products'

export default async function ProductsPage() {
  const products = await getProducts();
  return (
    <div>
      <h1>Our Products</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

De juiste strategie kiezen

Welke cachingstrategie het beste is, hangt af van hoe veranderlijk je gegevens zijn:

cache: 'no-store': Voor zeer dynamische, realtime of gevoelige gegevens die altijd actueel moeten zijn.
next: { revalidate: N }: Voor gegevens die periodiek worden bijgewerkt (bijvoorbeeld nieuwsartikelen en blogberichten), waarbij enige veroudering acceptabel is.
revalidatePath / revalidateTag: Voor gegevens die onvoorspelbaar veranderen, vaak door gebruikersacties (bijvoorbeeld reacties en voorraad in een webwinkel), en die na een mutatie direct moeten worden bijgewerkt.

Controle van cachingstrategieën

Je bouwt een feed voor sociale media waarin berichten vaak worden gemaakt en bijgewerkt. Je wilt dat gebruikers de nieuwste berichten zien zonder overmatig veel API-aanroepen te doen. Welke cachingstrategie is het meest geschikt voor het ophalen van de hoofdfeed?

Beantwoord dit in de interactieve les

Herhaling: caching aan de serverzijde

We hebben de belangrijkste cachingstrategieën aan de serverkant in Next.js met de fetch-API verkend:

Standaardcaching: fetch gebruikt standaard 'force-cache'.
Cache uitschakelen: gebruik cache: 'no-store' voor gegevens die altijd actueel zijn.
Tijdgebaseerde hervalidatie: gebruik next: { revalidate: N } voor stale-while-revalidate.
Hervalidatie op aanvraag: gebruik revalidatePath() of revalidateTag() in Server Actions/API-routes om de cache onmiddellijk bij te werken.

Als je deze technieken beheerst, kun je zeer performante en responsieve Next.js-toepassingen bouwen!

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: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Strategieën voor caching aan de serverzijde” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackwebapps met Next.js 15, waaronder “Strategieën voor caching aan de serverzijde”, 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 Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.

Wat leer ik in “Strategieën voor caching aan de serverzijde”?

Leer gegevens op de server cachen met `fetch`-opties en revalidatie om de prestaties te verbeteren. Je oefent met Fullstackwebapps met Next.js 15 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 Fullstackwebapps met Next.js 15 te beginnen?

Ervaring vooraf is niet nodig. Fullstackwebapps met Next.js 15 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 “Strategieën voor caching aan de serverzijde”?

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 Fullstackwebapps met Next.js 15?

Ja. Elke les over Fullstackwebapps met Next.js 15 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

React Query voor serverstate
Clientstate met Zustand/Jotai
Strategieën voor caching aan de serverzijde
Optimistische updates en cache-invalidatie

← Terug naar Fullstackwebapps met Next.js 15