Partial Prerendering (PPR) у Next.js: Гібридний стрімінг статики та динаміки

ФАЗА 1: ЗБІРКА ПРОЄКТУ (next build / Build-time Prerender Pass)
─────────────────────────────────────────────────────────────────────────────
Компілятор обходить дерево компонентів маршруту:
[Root Layout] ──► [Navigation] ──► [Static Products] ──► [<Suspense>]
                                                             │
                                                    Зустрінуто cookies()!
                                                             │
                                                  React.postpone() ──┐
                                                                     ▼
[Збереження у Static Shell (HTML + RSC)] ◄── [Вставка CartSkeleton fallback]
          │
          ▼
   Завантаження в Edge CDN Cache


ФАЗА 2: ОБРОБКА ЗАПИТУ КОРИСТУВАЧА (Request-time Resume Pass)
─────────────────────────────────────────────────────────────────────────────
Браузер                  Edge CDN                    Serverless Worker (Origin)
   │                         │                                   │
(1)├─── GET /shop ──────────►│                                   │
   │                         ├── Миттєве скидання Shell (TTFB)──►│
   │◄─── Чанк 1: Static Shell┤ [Користувач бачить FCP за 30мс!]  │
   │    (з CartSkeleton)     │                                   │
   │                         │                      Відновлення з точки postpone:
   │                         │                      const cookie = await cookies();
   │                         │                      const cart = await fetchCart();
   │                         │                                   │
(2)│                         │◄── Чанк 2: Динамічний слот ───────┤
   │◄── Заміна Skeleton ─────┤    HTML кошика + $RC()            │
   │    на живий контент     │                                   │

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  experimental: {
    // 'incremental' дозволяє вмикати PPR точково через export const experimental_ppr = true
    ppr: 'incremental',
  },
};

export default nextConfig;

import { Suspense } from 'react';
import { StaticCatalogHeader } from '@/components/StaticCatalogHeader';
import { StaticProductGrid } from '@/components/StaticProductGrid';
import { PersonalizedCartWidget } from '@/components/PersonalizedCartWidget';
import { CartSkeleton } from '@/components/skeletons';

// Вмикаємо Partial Prerendering для цього маршруту
export const experimental_ppr = true;

export default function CatalogPage() {
  return (
    <main className="max-w-7xl mx-auto p-6 space-y-8">
      {/* Статична частина: збирається під час збірки (Build-time) */}
      <StaticCatalogHeader />

      <div className="flex justify-between items-start gap-8">
        {/* Статична сітка товарів: віддається з Edge CDN миттєво */}
        <div className="flex-1">
          <StaticProductGrid />
        </div>

        {/* Межа Suspense оголошує динамічний слот (Dynamic Hole) */}
        <aside className="w-80">
          <Suspense fallback={<CartSkeleton />}>
            {/* Цей компонент звертається до cookies() і рендериться під час запиту */}
            <PersonalizedCartWidget />
          </Suspense>
        </aside>
      </div>
    </main>
  );
}

import { cookies } from 'next/headers';
import { db } from '@/lib/db';

export async function PersonalizedCartWidget() {
  // У Next.js 15+ виклик cookies() суворо асинхронний!
  const cookieStore = await cookies();
  const sessionToken = cookieStore.get('session_token')?.value;

  if (!sessionToken) {
    return <div className="text-sm text-text-muted">Кошик порожній</div>;
  }

  // Запит виконується тільки для конкретного вхідного запиту
  const cart = await db.cart.findUnique({
    where: { sessionToken },
    include: { items: true },
  });

  const count = cart?.items.reduce((acc, item) => acc + item.quantity, 0) ?? 0;

  return (
    <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-border bg-bg-elevated">
      <span className="text-sm font-medium text-text-primary">Товарів у кошику:</span>
      <span className="font-mono font-bold text-accent-cyan">{count}</span>
    </div>
  );
}

import { connection } from 'next/server';
import { fetchLiveExchangeRates } from '@/lib/finance';

export async function LiveStockTicker() {
  // await connection() явно викликає React.postpone() на етапі збірки!
  // Це повідомляє компілятору: не намагайся запустити цей код під час збірки,
  // виконай його суворо після відкриття клієнтського з'єднання.
  await connection();

  const rates = await fetchLiveExchangeRates();

  return (
    <div className="flex gap-4 text-xs font-mono py-1 overflow-x-auto text-text-muted">
      <span>USD/UAH: {rates.USDUAH}</span>
      <span>EUR/UAH: {rates.EURUAH}</span>
      <span>BTC/USD: {rates.BTCUSD}</span>
    </div>
  );
}

Error: Route /shop with `experimental_ppr` enabled accessed dynamic data without a Suspense boundary.