Czym są SSR, SSG i ISR w Next.js?

Question

Accepted Answer

To trzy główne strategie dotyczące *kiedy* generowana jest HTML strony. Wybranie odpowiedniej dla każdej strony balansuje świeżość, wydajność i koszty serwera. ## SSG — Static Site Generation (w czasie budowania) ```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 ; } ``` Strona jest wstępnie renderowana do statycznego HTML podczas budowania i buforowana na CDN. **Najszybsze możliwe** dostarczanie, ale zawartość jest zamrożona do następnego budowania. Najlepsze dla treści, które rzadko się zmieniają: strony marketingowe, dokumentacja, wpisy na blogu. ## SSR — Server-Side Rendering (przy każdym żądaniu) ```tsx // HTML generated FRESH on every request export default async function Page() { const data = await fetch("...", { cache: "no-store" }).then(r => r.json()); return ; } ``` Serwer renderuje stronę przy każdym żądaniu, więc dane są zawsze aktualne — kosztem wolniejszych odpowiedzi i obciążenia serwera przy każdej wizycie. Najlepsze dla spersonalizowanych lub zawsze świeżych danych: pulpity nawigacyjne, strony kont, wyniki wyszukiwania. ## ISR — Incremental Static Regeneration (hybryda) ```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 serwuje statyczny HTML (szybki, buforowany na CDN), ale **ponownie go waliduje** w tle według harmonogramu — dzięki czemu uzyskujesz wydajność statyczną z okresowo świeżymi danymi, bez przebudowywania całej witryny. Najlepsze dla treści, które zmieniają się okazjonalnie: listy produktów, wiadomości, rankingi. ## Porównanie ```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 ``` ## Dlaczego to ważne W App Router wybierasz te opcje dla każdego pobrania poprzez opcje cache (`force-cache` = SSG, `no-store` = SSR, `revalidate` = ISR) zamiast specjalnych funkcji. Zrozumienie kompromisu — statyczne jest najszybsze ale nieaktualne, SSR jest świeże ale kosztowne, ISR balansuje obydwa — pozwala optymalizować każdą stronę dla właściwej kombinacji wydajności i świeżości danych.