React Academy · Lekcja

Przyrostowa regeneracja statyczna (ISR)

Regenerowanie stron statycznych zgodnie z harmonogramem lub na żądanie bez pełnego ponownego wdrażania.

Przyrostowa regeneracja statyczna (ISR) to bezpłatna lekcja React 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 React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Czym jest ISR?

Incremental Static Regeneration pozwala Next.js dostarczać wstępnie zbudowaną stronę statyczną, jednocześnie regenerując ją w tle po upływie określonego czasu — łączy szybkość statycznego HTML ze świeżością renderowania po stronie serwera.

Jak działa ISR

Przy pierwszym żądaniu Next.js dostarcza statyczny HTML z cache. Po upływie okna rewalidacji kolejne żądanie uruchamia regenerowanie w tle. Następne żądania otrzymują nową stronę po zakończeniu regenerowania.

Włączanie ISR za pomocą revalidate

Wyeksportuj stałą revalidate albo ustaw next: { revalidate: N } podczas wywoływania fetch wewnątrz strony będącej Server Componentem.

// app/blog/page.tsx
export const revalidate = 60; // regenerate at most every 60 seconds

export default async function BlogPage() {
  const posts = await getPosts();
  return <PostList posts={posts} />;
}

ISR z trasami dynamicznymi

Połącz generateStaticParams z revalidate, aby wstępnie zbudować popularne strony dynamiczne i rewalidować je zgodnie z harmonogramem.

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // hourly

export async function generateStaticParams() {
  const posts = await getTopPosts(100);
  return posts.map(p => ({ slug: p.slug }));
}

export default async function PostPage({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

Rewalidacja na żądanie

Wywołaj revalidatePath() lub revalidateTag() z Server Action, trasy API albo handlera webhooka, aby natychmiast wygenerować ponownie określone strony — bez czekania na upływ interwału.

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';

export async function POST(req: Request) {
  const { secret, path } = await req.json();
  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Invalid secret' }, { status: 401 });
  }
  revalidatePath(path);
  return Response.json({ revalidated: true, path });
}

Zachowanie zastępcze dla nieznanych ścieżek

W przypadku tras dynamicznych, których nie ma w generateStaticParams, ustaw dynamicParams = true (domyślnie), aby renderować je na żądanie i przechowywać w cache, albo false, aby zwracać 404.

// app/blog/[slug]/page.tsx
export const dynamicParams = true; // default: render and cache unknown slugs
// export const dynamicParams = false; // return 404 for paths not in generateStaticParams

Stale-While-Revalidate

Podczas regenerowania Next.js dostarcza nieaktualną stronę do momentu przygotowania nowej wersji. Użytkownicy zawsze otrzymują odpowiedź — nie muszą czekać na świeże dane.

ISR a SSR i Static

Static: zbudowane raz i nigdy niezmieniane. ISR: wstępnie zbudowane i regenerowane zgodnie z harmonogramem. SSR: renderowane od nowa przy każdym żądaniu. Wybierz ISR dla treści, które zmieniają się sporadycznie, ale korzystają z szybkości dostarczania statycznych stron.

Ograniczenia ISR

ISR nie nadaje się do spersonalizowanych treści (danych zależnych od użytkownika) ani danych, które muszą być dostępne w czasie rzeczywistym. W takich przypadkach użyj wywołań fetch z no-store i SSR.

ISR w Pages Router (getStaticProps)

W Pages Router ISR używa getStaticProps wraz ze zwracaną wartością revalidate — koncepcja jest taka sama, ale API inne.

// pages/blog.tsx (Pages Router)
export async function getStaticProps() {
  const posts = await getPosts();
  return { props: { posts }, revalidate: 60 };
}

Weryfikowanie ISR

Sprawdź nagłówek odpowiedzi x-nextjs-cache: HIT oznacza dostarczenie strony z cache, MISS oznacza świeże renderowanie, a STALE oznacza dostarczanie nieaktualnej strony podczas rewalidacji.

Szybki test

Co się dzieje, gdy użytkownik zażąda strony ISR, której okno rewalidacji właśnie wygasło?

Podsumowanie

ISR wstępnie buduje strony i rewaliduje je co N sekund za pomocą export const revalidate = N. Używaj generateStaticParams dla popularnych tras dynamicznych oraz rewalidacji na żądanie za pomocą revalidatePath/Tag, aby natychmiast odświeżać dane po mutacjach.

Często zadawane pytania

Czy lekcja „Przyrostowa regeneracja statyczna (ISR)” jest bezpłatna?

Tak — pełny tekst „Przyrostowa regeneracja statyczna (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 React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Przyrostowa regeneracja statyczna (ISR)”?

Regenerowanie stron statycznych zgodnie z harmonogramem lub na żądanie bez pełnego ponownego wdrażania. Ćwiczysz React 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ąć React Academy?

Nie wymagamy żadnego doświadczenia. React 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 „Przyrostowa regeneracja statyczna (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 React Academy?

Tak. Każda lekcja React 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 React Academy