Controlul cache-ului cu fetch() – force-cache și no-store în Next.js

fetch(url, { cache: 'force-cache' })  // Implicit / Static (SSG)
fetch(url, { cache: 'no-store' })     // Dinamic la fiecare cerere (SSR)

Ce face Controlul cache-ului cu fetch() - force-cache și no-store

Next.js extinde API-ul global `fetch()` pentru a permite configurarea granulară a persistenței datelor în Data Cache.

Opțiunea cache: 'force-cache' (sau omisiunea în versiunile mai vechi) stochează răspunsul permanent la momentul compilării (similar cu SSG în vechiul getStaticProps).

Opțiunea cache: 'no-store' instruiește serverul să execute o cerere proaspătă la fiecare vizită a utilizatorului, garantând date în timp real (similar cu SSR în getServerSideProps).

Exemple

Exemplul 1: Interogare de date în timp real cu dezactivarea cache-ului

Asigură că datele despre prețuri sau stocuri sunt mereu proaspete.

export default async function StocProduse() {
  const raspuns = await fetch('https://api.dexblog.ro/stocuri', {
    cache: 'no-store'
  });
  const stoc = await raspuns.json();

  return <div>Stoc curent: {stoc.cantitate} bucăți</div>;
}

Ieșire în terminal

Fiecare cerere către pagină va citi cele mai recente date din API.

Greșeli frecvente

• Folosirea ‘no-store’ pe resurse mari care se schimbă rar, provocând degradarea vitezei serverului și creșterea latenței pentru utilizatori.

Comenzi înrudite

• Revalidare bazată pe timp (ISR) - next: { revalidate: secunde }: Implementează Incremental Static Regeneration (ISR), reîmprospătând cache-ul în fundal la expirarea intervalului configurat.
• 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.