Ezek a három fő stratégia arra, hogy mikor generálódik egy oldal HTML-je. Az oldalanként megfelelő választás egyensúlyt teremt a frissesség, teljesítmény és kiszolgáló költsége között.
() {
posts = (, { : }).( r.());
;
}
Az oldal a buildidőben statikus HTML-re lesz pre-renderelve és a CDN-en cachébe helyezve. A lehető leggyorsabb szállítás, de a tartalom az addig be nem fagyott, amíg a következő build nem történik meg. Legjobb az olyan tartalomnak, amely ritkán változik: marketingoldalak, dokumentáció, blogbejegyzések.
// HTML generated FRESH on every request
export default async function Page() {
const data = await fetch("...", { cache: "no-store" }).then(r => r.json());
return <Dashboard data={data} />;
}
A kiszolgáló minden kéréskor rendereli az oldalt, így az adatok mindig aktuálisak — lassabb válaszok és kiszolgáló terhelés ára mellett az egyes látogatások során. Legjobb a személyre szabott vagy mindig friss adatoknak: irányítópultok, fiók oldalak, keresési eredmények.
// Static, but automatically rebuilt in the background every N seconds
export const revalidate = 60; // regenerate at most once per 60s
export default async function Page() {
const products = await fetch("...", { next: { revalidate: 60 } }).then(r => r.json());
return <Products items={products} />;
}
Az ISR statikus HTML-t biztosít (gyors, CDN-en cachéelt), de revalidálja azt az ütemezéskor a háttérben — így statikus teljesítményt kapsz időszakosan friss adatokkal, anélkül hogy újra kellene építened az egész oldalt. Legjobb az olyan tartalomnak, amely időnként változik: terméklisták, hírek, ranglisták.
Speed Freshness Server cost Use for
SSG fastest build-time only none docs, marketing
SSR slower always fresh every request dashboards, personalized
ISR fast every N seconds occasional catalogs, news
Az App Routerben ezeket fetch-enként választod ki cache opciók (force-cache = SSG, no-store = SSR, revalidate = ISR) segítségével, speciális függvények helyett.
A kompromisszum megértése — a statikus a leggyorsabb de régi, az SSR friss de költséges, az ISR kettőt egyensúlyoz — lehetővé teszi, hogy a teljesítmény és adatfrissesség megfelelő keverékéhez optimalizáld minden oldalt.