Czym jest Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** to model renderowania Next.js, który łączy **zawartość statyczną i dynamiczną na jednej stronie** — serwując natychmiastową statyczną powłokę podczas przesyłania dynamicznych części. Rozmywa starą linię "wszystko albo nic" między SSG a SSR. ## Problem, który rozwiązuje Tradicyjnie strona była *albo* całkowicie statyczna (szybka, ale bez treści dla poszczególnych użytkowników) *albo* całkowicie dynamiczna (może być spersonalizowana, ale wolniejsza i niebuforowana). Rzeczywiste strony są mieszane: strona produktu ma statyczny układ/opis, ale dynamiczną liczbę artykułów w koszyku i spersonalizowane rekomendacje. PPR pozwala, aby **ta sama strona** była obydwoma. ## Jak to działa ```tsx import { Suspense } from "react"; export default function ProductPage() { return (

{/* STATIC — prerendered, served instantly from CDN */} {/* STATIC — same for everyone */} }> {/* DYNAMIC — streamed in per request */} }> {/* DYNAMIC — personalized, streamed */}

); } ``` Główna idea: wszystko **poza** granicą `` jest **wstępnie renderowane jako statyczna powłoka** w czasie budowania. Wszystko **wewnątrz** Suspense (które czyta dane dynamiczne — cookies, nagłówki, niebuforowane pobrania) jest traktowane jako dynamiczny "otwór", który przesyłany jest w czasie żądania. ## Sekwencja dostarczenia ```text 1. Static shell (header, product info, skeletons) → served INSTANTLY from the edge/CDN 2. Dynamic holes (cart, recommendations) → stream in and replace the skeletons ``` Użytkownik otrzymuje znaczący pierwszy obraz natychmiast (statyczna powłoka z CDN), następnie wypełniają się spersonalizowane części — najlepsze z obu: szybkość statyczna *i* zawartość dynamiczna, bez oddzielnego routingu ani decyzji o trybie renderowania. ## Status ```text PPR has been an experimental/incremental feature; enable per-config/route. Check your Next.js version — the API and stability have been evolving. ``` ## Dlaczego to ważne PPR eliminuje fałszywy wybór między "szybko, ale statycznie" a "dynamicznie, ale wolno." Poprzez wstępne renderowanie powłoki i przesyłanie tylko dynamicznych otworów (oznaczonych przez Suspense), jedna strona dostarcza CDN-instancyjny pierwszy obraz oraz spersonalizowaną zawartość — automatycznie, bez dzielenia strony ani ręcznego wyboru SSG vs SSR. Reprezentuje to kierunek, w którym zmierza rendering Next.js: granularny, komponencie-po-komponencie statyczny/dynamiczny skład.