Часткове Попереднє Рендерування (PPR)

Гібридна техніка, що поєднує статичні оболонки, попередньо відрендерені під час збірки, з динамічним контентом, переданим через Suspense. Найкраще для Гібридних додатків, сценаріїв оптимізованої продуктивності та Сучасних сторінок, які змішують статичний UI з динамічними даними.

Час Збірки

React.renderToStaticMarkup()

Згенерувати статичну оболонку

Зберігати статичну оболонку

Час Виконання

🌐

Request

Response

🖥️

Сервер надсилає статичну оболонку

Сервер отримує динамічні дані

Сервер передає динамічний контент

Клієнт

Клієнт надсилає запит

Клієнт отримує статичну оболонку

Клієнт отримує динамічний контент

React.hydrate()

✨Сторінка інтерактивна

Переваги x Компроміси

Benefits

•Миттєва Статична Оболонка: Швидке початкове завантаження сторінки
•Прогресивне Покращення: Динамічний контент тече
•Оптимізований UX: Користувачі бачать контент миттєво
•Гнучка Архітектура: Змішує статичний та динамічний контент

Trade-offs

•Складність Suspense: Потрібні належні обгортки Suspense
•Затримки буфера браузера: Може затримати динамічний контент
•Коди статусу не можуть змінюватися: Встановлюються до початку стрімінгу
•Експериментальний: API та найкращі практики ще розвиваються

Як реалізувати?

PPR поєднує статичну оболонку зі стрімінгом динамічного контенту. Вимагає React 19 та RSC. Введено в Next.js 14.1 (експериментальний), стабільний у 15+.

// next.config.js
export default {
  experimental: {
    ppr: true, // або cacheComponents: true
  },
};

import { Suspense } from "react";

export default function Page() {
  return (
    <div>
      <StaticHeader />
      <Suspense fallback={<Skeleton />}>
        <DynamicContent />
      </Suspense>
    </div>
  );
}

•Увімкніть PPR через експериментальну настройку ppr в next.config.js
•Вимагає React 19 та React Server Components
•Обгорніть динамічні компоненти в <Suspense fallback={<Skeleton />}>
•Використовуйте директиву 'use cache' для динамічного контенту, що кешується
•Статичні частини попередньо рендеряться під час збірки