Real World Example

On an Amazon product page, almost everything is static content (title, images, description, specs). Only a few parts are interactive: the quantity picker, "Add to Cart", the pincode delivery checker. ShopEase follows the same split:

app/products/[id]/page.tsx

import { notFound } from 'next/navigation';
import Image from 'next/image';
import { getProduct } from '@/lib/products';
import AddToCartButton from '@/components/AddToCartButton'; // 'use client'
import PincodeChecker from '@/components/PincodeChecker'; // 'use client'

export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const product = await getProduct(Number(id));
  if (!product) notFound();

  return (
    <article className="grid gap-8 md:grid-cols-2">
      <Image src={product.imageUrl} alt={product.name} width={600} height={600} priority />
      <div>
        <h1 className="text-2xl font-bold">{product.name}</h1>
        <p className="text-xl">₹{product.price}</p>
        <p>{product.description}</p>
        <AddToCartButton productId={product.id} inStock={product.stock > 0} />
        <PincodeChecker productId={product.id} />
      </div>
    </article>
  );
}

Less JavaScript means faster pages on budget Android phones and slow 4G connections, which is a big part of the Indian market.