Frontend Academy · Lekcja

SSG, SSR i ISR

Lekcja 3 z 414 kroki

SSG, SSR i ISR to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Trzy strategie renderowania

Next.js obsługuje trzy sposoby renderowania stron: SSG (Static Site Generation), SSR (Server-Side Rendering) oraz ISR (Incremental Static Regeneration). Każdy z nich wiąże się z innymi kompromisami.

SSG — generowanie podczas budowania

Strony są generowane jako statyczny HTML podczas budowania i serwowane z CDN. Zapewnia to najszybsze możliwe dostarczanie treści. Najlepiej sprawdza się w przypadku stron marketingowych, blogów i dokumentacji.

SSG w Pages Routerze

Wyeksportuj getStaticProps ze strony. Funkcja jest uruchamiana podczas budowania i przekazuje propsy do komponentu.

// pages/blog/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post } };
}

SSG w App Routerze

Domyślnie asynchroniczne komponenty serwerowe pobierają dane podczas budowania. W przypadku tras dynamicznych użyj generateStaticParams.

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map(p => ({ slug: p.slug }));
}

export default async function Post({ params }) {
  const post = await fetchPost(params.slug);
  return <article>{post.body}</article>;
}

SSR — generowanie dla każdego żądania

Strony są renderowane przy każdym żądaniu. Użyj tego rozwiązania, gdy treść zależy od użytkownika lub zmienia się zbyt często, aby korzystać z pamięci podręcznej.

SSR w Pages Routerze

Wyeksportuj getServerSideProps.

// pages/dashboard.tsx
export async function getServerSideProps({ req }) {
  const userId = req.cookies.userId;
  const data = await fetchUserDashboard(userId);
  return { props: { data } };
}

SSR w App Routerze

Wymuś renderowanie dla każdego żądania za pomocą dynamic = 'force-dynamic' lub odczytując cookies/headers, co automatycznie wyłącza renderowanie statyczne.

// app/dashboard/page.tsx
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const userId = cookies().get('userId')?.value;
  const data = await fetchUserDashboard(userId);
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

// Or explicit:
export const dynamic = 'force-dynamic';

ISR — najlepsze cechy obu rozwiązań

ISR serwuje statyczną stronę, ale w tle generuje ją ponownie co N sekund. Łączy szybkość SSG ze względnie świeżymi danymi.

ISR w Pages Routerze

Dodaj revalidate do getStaticProps.

export async function getStaticProps() {
  const posts = await fetchPosts();
  return {
    props: { posts },
    revalidate: 60  // regenerate at most every 60 seconds
  };
}

ISR w App Routerze

Użyj next: { revalidate: N } w opcjach fetch albo ustaw export const revalidate = N na stronie.

// Option A: per fetch
const posts = await fetch('https://api/posts', { next: { revalidate: 60 } })
  .then(r => r.json());

// Option B: whole page
export const revalidate = 60;

export default async function Page() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return <Feed posts={posts} />;
}

Ponowna walidacja na żądanie

Uruchom ręcznie ponowne generowanie, na przykład z poziomu webhooka CMS, bez czekania na upływ określonego czasu.

// pages/api/revalidate.ts (Pages) or app/api/revalidate/route.ts (App)
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(req) {
  const { slug } = await req.json();
  revalidatePath(`/blog/${slug}`);
  return Response.json({ revalidated: true });
}

Wybór właściwej strategii

Użyj SSG, gdy dane zmieniają się rzadko (strony marketingowe, dokumentacja, blog). Użyj ISR, gdy dane są aktualizowane od czasu do czasu (strony zasilane przez CMS, listy produktów w sklepie internetowym). Użyj SSR dla treści zależnych od użytkownika (panele, strony kont).

Szybki test

Co zapewnia ISR (Incremental Static Regeneration), czego nie zapewnia czyste SSG?

Odpowiedz w interaktywnej lekcji

Podsumowanie: SSG, SSR, ISR

SSG: generowanie podczas budowania, największa szybkość, stała treść. SSR: generowanie dla każdego żądania, treść dynamiczna, mniejsza szybkość. ISR: SSG + zaplanowane ponowne generowanie w tle — względnie świeże dane i szybkość. Pages Router używa getStaticProps/getServerSideProps. App Router używa asynchronicznych komponentów serwerowych z opcją fetch revalidate lub stałą revalidate na poziomie strony. Do aktualizacji na żądanie służą revalidatePath/Tag.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 41
Lekcje: 163

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „SSG, SSR i ISR” jest bezpłatna?

Tak — pełny tekst „SSG, SSR i ISR” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „SSG, SSR i ISR”?

Wygeneruje Pan/Pani strony statycznie podczas budowania, wyrenderuje je na serwerze dla każdego żądania lub będzie ponownie walidować buforowane strony zgodnie z harmonogramem za pomocą Incremental S… Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „SSG, SSR i ISR”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Frontend Academy