ТЗ: High-Load E-Commerce витрина на Next.js 16 (Server Actions, Optimistic UI & PPR)

// app/products/[slug]/page.tsx
import { Suspense } from 'react'
import { ProductGallery } from '@/components/products/ProductGallery'
import { ProductStockPrice, ProductStockSkeleton } from '@/components/products/ProductStockPrice'
import { AddToCartForm } from '@/components/products/AddToCartForm'
import { getProductStaticData } from '@/lib/dal/products'

export const experimental_ppr = true

interface PageProps {
  params: Promise<{ slug: string }>
}

export default async function ProductPage({ params }: PageProps) {
  const { slug } = await params
  // Статические данные кэшируются на этапе сборки / ISR
  const product = await getProductStaticData(slug)

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-7xl mx-auto py-8">
      {/* Статическая часть: мгновенный TTFB */}
      <ProductGallery images={product.images} title={product.title} />

      <div>
        <h1 className="text-3xl font-extrabold tracking-tight">{product.title}</h1>
        <p className="mt-4 text-text-muted">{product.description}</p>

        {/* Динамический стриминговый остров: реальная цена и остатки */}
        <Suspense fallback={<ProductStockSkeleton />}>
          <ProductStockPrice productId={product.id} basePrice={product.basePrice} />
        </Suspense>

        <AddToCartForm product={product} />
      </div>
    </div>
  )
}