React Academy · Les

Incremental Static Regeneration (ISR)

Genereer statische pagina's opnieuw volgens een schema of op aanvraag, zonder volledige redeploy.

Les 3 van 413 stappen

Incremental Static Regeneration (ISR) is een gratis React Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Academy bevat in totaal 4 lessen.

Wat is ISR?

Incrementele statische regeneratie zorgt ervoor dat Next.js een vooraf gebouwde statische pagina aanbiedt en deze op de achtergrond opnieuw genereert nadat een bepaalde periode is verstreken. Zo combineert het de snelheid van statische HTML met de actualiteit van serverrendering.

Hoe werkt ISR?

Bij de eerste aanvraag biedt Next.js de gecachte statische HTML aan. Nadat het venster voor opnieuw valideren is verstreken, start de volgende aanvraag een regeneratie op de achtergrond. Daaropvolgende aanvragen bieden de nieuwe pagina aan zodra de regeneratie is voltooid.

ISR inschakelen met revalidate

Exporteer een constante revalidate of stel next: { revalidate: N } in bij een fetch-aanroep binnen een Server Component-pagina.

// app/blog/page.tsx
export const revalidate = 60; // regenerate at most every 60 seconds

export default async function BlogPage() {
  const posts = await getPosts();
  return <PostList posts={posts} />;
}

ISR met dynamische routes

Combineer generateStaticParams met revalidate om populaire dynamische pagina's vooraf te bouwen en volgens een schema opnieuw te valideren.

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // hourly

export async function generateStaticParams() {
  const posts = await getTopPosts(100);
  return posts.map(p => ({ slug: p.slug }));
}

export default async function PostPage({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

Op aanvraag opnieuw valideren

Roep revalidatePath() of revalidateTag() aan vanuit een Server Action, API-route of webhookafhandelaar om specifieke pagina's direct opnieuw te genereren — zonder op het interval te wachten.

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';

export async function POST(req: Request) {
  const { secret, path } = await req.json();
  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Invalid secret' }, { status: 401 });
  }
  revalidatePath(path);
  return Response.json({ revalidated: true, path });
}

Terugvalgedrag voor onbekende paden

Stel voor dynamische routes die niet in generateStaticParams staan dynamicParams = true in, de standaardwaarde, om ze op aanvraag te renderen en te cachen, of gebruik false om 404 terug te geven.

// app/blog/[slug]/page.tsx
export const dynamicParams = true; // default: render and cache unknown slugs
// export const dynamicParams = false; // return 404 for paths not in generateStaticParams

Verouderd-tijdens-opnieuw-valideren

Tijdens de regeneratie biedt Next.js de verouderde pagina aan totdat de nieuwe versie klaar is. Gebruikers krijgen altijd een antwoord, zonder op verse gegevens te wachten.

ISR versus SSR versus statisch

Statisch: één keer gebouwd en verandert nooit. ISR: vooraf gebouwd en volgens een schema opnieuw gegenereerd. SSR: bij elke aanvraag opnieuw gerenderd. Kies ISR voor inhoud die af en toe verandert, maar baat heeft bij de snelheid van statische levering.

Aandachtspunten bij ISR

ISR is niet geschikt voor gepersonaliseerde inhoud, zoals gebruikersspecifieke gegevens, of gegevens die real-time moeten zijn. Gebruik daarvoor fetch-aanroepen met no-store en SSR.

ISR in de Pages Router (getStaticProps)

In de Pages Router gebruikt ISR getStaticProps met een retourwaarde revalidate — hetzelfde concept, maar met een andere API.

// pages/blog.tsx (Pages Router)
export async function getStaticProps() {
  const posts = await getPosts();
  return { props: { posts }, revalidate: 60 };
}

ISR controleren

Controleer de antwoordheader x-nextjs-cache: HIT betekent dat de pagina uit de cache is aangeboden, MISS betekent dat de pagina opnieuw is gerenderd en STALE betekent dat een verouderde pagina wordt aangeboden terwijl deze opnieuw wordt gevalideerd.

Korte controle

Wat gebeurt er wanneer een gebruiker een ISR-pagina opvraagt waarvan het venster voor opnieuw valideren net is verlopen?

Beantwoord dit in de interactieve les

Samenvatting

ISR bouwt pagina's vooraf en valideert ze elke N seconden opnieuw via export const revalidate = N. Gebruik generateStaticParams voor populaire dynamische routes en opnieuw valideren op aanvraag via revalidatePath/Tag voor directe actualiteit na gegevenswijzigingen.

Gratis beginnen

Leer React 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: 88
Lessen: 324

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Incremental Static Regeneration (ISR)” gratis?

Ja — de volledige tekst van “Incremental Static Regeneration (ISR)” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus React Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus React Academy bevat in totaal 4 lessen.

Wat leer ik in “Incremental Static Regeneration (ISR)”?

Genereer statische pagina's opnieuw volgens een schema of op aanvraag, zonder volledige redeploy. Je oefent met React Academy 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 React Academy te beginnen?

Ervaring vooraf is niet nodig. React Academy 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 “Incremental Static Regeneration (ISR)”?

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 React Academy?

Ja. Elke les over React Academy 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

← Terug naar React Academy