Co jsou SSR, SSG a ISR v Next.js?

Question

Accepted Answer

Jedná se o tři hlavní strategie určující *kdy* je vygenerován HTML stránky. Výběr správné strategie pro každou stránku vyvažuje čerstvost, výkon a náklady na server. ## SSG — Static Site Generation (v čase sestavení) ```tsx // HTML generated ONCE during `next build`, then served from CDN export default async function Page() { const posts = await fetch("...", { cache: "force-cache" }).then(r => r.json()); return ; } ``` Stránka je při sestavení předem vykreslena na statický HTML a uložena v mezipaměti CDN. **Nejrychlejší možné** doručení, ale obsah zůstává zmrazený až do dalšího sestavení. Nejlepší pro obsah, který se mění zřídka: marketingové stránky, dokumentace, blog příspěvky. ## SSR — Server-Side Rendering (na každý požadavek) ```tsx // HTML generated FRESH on every request export default async function Page() { const data = await fetch("...", { cache: "no-store" }).then(r => r.json()); return ; } ``` Server vykresluje stránku pro každý požadavek, takže data jsou vždy aktuální — za cenu pomalejších odpovědí a zatížení serveru při každé návštěvě. Nejlepší pro personalizovaná nebo vždy čerstvá data: řídicí panely, stránky účtů, výsledky vyhledávání. ## ISR — Incremental Static Regeneration (hybrid) ```tsx // 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 ; } ``` ISR poskytuje statický HTML (rychlý, uložený v mezipaměti CDN), ale **revaliduje** jej na pozadí podle plánu — takže získáte statický výkon s periodicky čerstvými daty, bez nutnosti přestavby celého webu. Nejlepší pro obsah, který se mění příležitostně: seznamy produktů, zprávy, žebříčky. ## Porovnání ```text 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 ``` ## Proč je to důležité V App Routeru si vybíráte tyto možnosti pro každý fetch prostřednictvím možností mezipaměti (`force-cache` = SSG, `no-store` = SSR, `revalidate` = ISR) spíše než pomocí speciálních funkcí. Porozumění kompromisu — static je nejrychlejší, ale zastaralý, SSR je čerstvý, ale nákladný, ISR vyvažuje obojí — vám umožní optimalizovat každou stránku na správný mix výkonu a čerstvosti dat.