Det här är de tre huvudstrategierna för när en sidas HTML genereras. Att välja rätt för varje sida balanserar aktualitet, prestanda och serverkostnad.
SSG — Static Site Generation (vid byggtid)
tsx
() {
posts = (, { : }).( r.());
;
}
Det här är de tre huvudstrategierna för när en sidas HTML genereras. Att välja rätt för varje sida balanserar aktualitet, prestanda och serverkostnad.
() {
posts = (, { : }).( r.());
;
}
Sidan förgenereras till statisk HTML vid bygget och cachas på ett CDN. Snabbast möjlig leverans, men innehållet är fruset tills nästa bygge. Bäst för innehåll som sällan ändras: marknadsföringssidor, dokumentation, blogginlägg.
// 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} />;
}
Servern renderar sidan per begäran, så data är alltid aktuell — till priset av långsammare svar och serverbelastning vid varje besök. Bäst för personaliserad eller alltid aktuell data: instrumentpaneler, kontosidor, sökresultat.
// 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} />;
}
ISR serverar statisk HTML (snabb, cachad på CDN) men revaliderar den i bakgrunden enligt ett schema — så du får statisk prestanda med periodiskt uppdaterad data, utan att bygga om hela webbplatsen. Bäst för innehåll som ändras ibland: produktlistor, nyheter, toplistor.
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
I App Router väljer du dessa per fetch via cache-alternativ (force-cache = SSG, no-store = SSR, revalidate = ISR) snarare än speciella funktioner.
Att förstå avvägningen — statisk är snabbast men föråldrad, SSR är aktuell men dyr, ISR balanserar båda — låter dig optimera varje sida för rätt mix av prestanda och datafräschhet.