Что такое Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** — это модель рендеринга Next.js, которая объединяет **статическое и динамическое содержимое на одной странице**, предоставляя мгновенную статическую оболочку при потоковой передаче динамических частей. Она размывает старую границу "всё или ничего" между SSG и SSR. ## Проблема, которую она решает Традиционно страница была *либо* полностью статической (быстро, но без контента для отдельного пользователя), *либо* полностью динамической (может быть персонализирована, но медленнее и не кешируется). Реальные страницы смешанные: страница продукта имеет статическую компоновку/описание, но динамический счётчик корзины и персонализированные рекомендации. PPR позволяет **одной и той же странице** быть обоими. ## Как это работает ```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 */}

); } ``` Ключевая идея: всё **снаружи** границы `` **предварительно отрисовывается как статическая оболочка** во время сборки. Всё **внутри** Suspense (которое читает динамические данные — cookies, headers, некешированные запросы) рассматривается как динамическая "дыра", которая передаётся потоком во время запроса. ## Последовательность доставки ```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 ``` Пользователь получает значимую первую отрисовку сразу же (статическая оболочка с CDN), затем персонализированные части заполняются — лучшее из обоих: статическая скорость *и* динамическое содержимое, без отдельной маршрутизации или ручного выбора режима рендеринга. ## Статус ```text PPR has been an experimental/incremental feature; enable per-config/route. Check your Next.js version — the API and stability have been evolving. ``` ## Почему это важно PPR устраняет ложный выбор между "быстро, но статически" и "динамически, но медленно." Предварительно отрисовав оболочку и передав потоком только динамические дыры (отмеченные Suspense), одна страница доставляет мгновенную отрисовку CDN плюс персонализированное содержимое — автоматически, без разделения страницы или ручного выбора SSG в сравнении с SSR. Это представляет направление развития рендеринга Next.js: детальное, покомпонентное статическое/динамическое композирование.