Sub-Second E-Commerce Architecture: High-Performance Next.js, Edge Rendering & Web Vitals

import { Suspense } from 'react';
import { ProductGallery } from '@/components/ProductGallery';
import { AddToCartButton } from '@/components/AddToCartButton';
import { PersonalizedRecommendations } from '@/components/PersonalizedRecommendations';
import { SkeletonLoader } from '@/components/SkeletonLoader';

export default async function ProductDetailPage({ 
  params 
}: { 
  params: Promise<{ slug: string }> 
}) {
  const { slug } = await params;
  const product = await getProductBySlug(slug);

  return (
    <main className="max-w-7xl mx-auto px-6 py-12">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
        <ProductGallery images={product.images} title={product.name} />
        <div className="space-y-6">
          <h1 className="text-3xl font-black">{product.name}</h1>
          <p className="text-2xl font-bold text-red-600">${product.price} USD</p>
          <p className="text-neutral-600 leading-relaxed">{product.description}</p>
          
          {/* Isolated Client Boundary: Zero JS overhead for the rest of the page */}
          <AddToCartButton product={product} />

          {/* Dynamic Asynchronous Component Streaming */}
          <Suspense fallback={<SkeletonLoader count={3} />}>
            <PersonalizedRecommendations categoryId={product.categoryId} />
          </Suspense>
        </div>
      </div>
    </main>
  );
}