Revalidare bazată pe timp (ISR) – next: { revalidate: secunde } în Next.js

fetch(url, { next: { revalidate: 60 } })  // Revalidare la 60 de secunde

Ce face Revalidare bazată pe timp (ISR) - next: { revalidate: secunde }

Opțiunea next: { revalidate: secunde } combină viteza extremă a paginilor statice cu prospețimea datelor dinamice.

Pentru numărul specificat de secunde (ex: 60), toți vizitatorii primesc răspunsul instant din cache-ul static.

La prima cerere sosită după expirarea celor 60 de secunde, vizitatorul primește încă versiunea din cache, dar Next.js declanșează în fundal o descărcare nouă a datelor, actualizând transparent cache-ul pentru vizitatorii următori (mecanismul stale-while-revalidate).

Exemple

Exemplul 1: Actualizarea listei de articole o dată la fiecare oră (3600 secunde)

Optimizează traficul extern către API-ul de conținut.

export default async function Noutati() {
  const date = await fetch('https://api.dexblog.ro/noutati', {
    next: { revalidate: 3600 }
  });
  const stiri = await date.json();

  return <div>{stiri.map((s: any) => <p key={s.id}>{s.titlu}</p>)}</div>;
}

Ieșire în terminal

Pagina rămâne ultrarapidă din cache și se actualizează automat la fiecare oră.

Greșeli frecvente

• Presupunerea că revalidarea se face printr-un cron job automat la secunda exactă; revalidarea are loc doar atunci când există o cerere reală din partea unui utilizator după expirarea timpului.

Comenzi înrudite

• Controlul cache-ului cu fetch() - force-cache și no-store: Extinde funcția standard nativă fetch() cu mecanisme puternice de stocare în cache la nivel de cerere HTTP.
• revalidatePath() - Invalidarea manuală a cache-ului pe o rută: Purjează imediat cache-ul paginii indicate, forțând regenerarea ei la următoarea cerere.
• revalidateTag() - Invalidarea țintită a cache-ului după etichete: Invalidează instant toate cererile de date marcate cu o anumită etichetă (tag), indiferent pe ce pagini din site sunt afișate.