Complexity, Unified.

// React Server Component — streams in two waves so the
// hero paints fast and recommendations fill in after.
export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await getProduct(id);

  return (
    <article>
      <ProductHero product={product} />
      <Suspense fallback={<RecommendationsSkeleton />}>
        <Recommendations productId={id} />
      </Suspense>
    </article>
  );
}

async function Recommendations({ productId }: { productId: string }) {
  // Streams in after the page shell is sent.
  const items = await getRecommendations(productId);
  return <RecommendationGrid items={items} />;
}