High-Scale E-Commerce Architecture (Vercel Commerce Pattern)

1// app/products/[handle]/page.tsx
2import { Suspense } from 'react';
3import { notFound } from 'next/navigation';
4import { getProductStaticData } from '@/lib/commerce/catalog';
5import { ProductGallery } from '@/components/ProductGallery';
6import { ProductDescription } from '@/components/ProductDescription';
7import { LiveInventoryStatus } from '@/components/LiveInventoryStatus';
8import { AddToCartForm } from '@/components/AddToCartForm';
9
10export default async function ProductDetailPage({
11  params,
12}: {
13  params: Promise<{ handle: string }>;
14}) {
15  const { handle } = await params;
16
17  // 1. STATIC CONTENT (Cached globally at CDN edge! Instant delivery):
18  // Product title, description, image URLs, specifications
19  const product = await getProductStaticData(handle);
20  if (!product) notFound();
21
22  return (
23    <div className="grid grid-cols-1 md:grid-cols-2 gap-12 p-8 max-w-7xl mx-auto">
24      {/* Instant visual content for fast LCP */}
25      <ProductGallery images={product.images} title={product.title} />
26
27      <div className="space-y-6">
28        <h1 className="text-3xl font-extrabold">{product.title}</h1>
29        <ProductDescription content={product.descriptionHtml} />
30
31        {/* 
32          2. DYNAMIC REAL-TIME STREAMING:
33          Stock status, inventory count, flash sale pricing
34          Streamed in parallel without blocking initial HTML!
35        */}
36        <Suspense fallback={<div className="h-10 bg-gray-100 animate-pulse rounded" />}>
37          <LiveInventoryStatus productId={product.id} />
38        </Suspense>
39
40        <AddToCartForm productId={product.id} variants={product.variants} />
41      </div>
42    </div>
43  );
44}