// Server Component (default in Next.js App Router)
// Runs ONLY on the server — can use fs, database, env vars directly
async function ProductPage({ productId }: { productId: string }) {
  // Direct database call — no fetch, no API layer needed
  const product = await db.product.findUnique({ where: { id: productId } });
  const reviews = await db.review.findMany({ where: { productId } });
  
  return (
    <div>
      <h1>{product.name}</h1>
      <ProductImages images={product.images} />
      {/* Client Component — islands of interactivity */}
      <AddToCartButton productId={productId} price={product.price} />
      <ReviewList reviews={reviews} />
    </div>
  );
}

// Client Component — explicitly opted in
'use client'

function AddToCartButton({ productId, price }: Props) {
  const [loading, setLoading] = useState(false);
  const { addItem } = useCart();
  
  return (
    <button onClick={() => {
      setLoading(true);
      addItem(productId, price).finally(() => setLoading(false));
    }}>
      {loading ? 'Adding...' : 'Add to Cart'}
    </button>
  );
}

// Before React Compiler: manual memoization required
const ExpensiveList = memo(function ExpensiveList({ items, onSelect }) {
  const sorted = useMemo(() => items.sort(by('name')), [items]);
  const handleSelect = useCallback((id) => onSelect(id), [onSelect]);
  return <List items={sorted} onSelect={handleSelect} />;
});

// After React Compiler: just write the component
function ExpensiveList({ items, onSelect }) {
  const sorted = items.sort(by('name'));
  return <List items={sorted} onSelect={onSelect} />;
  // Compiler automatically injects the right memoization
}

// use() — unwrap promises and context inline
function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise);  // Suspends if not resolved
  return <div>{user.name}</div>;
}

// useOptimistic — immediate UI updates before server confirmation
function LikeButton({ postId, initialLikes }: Props) {
  const [likes, setOptimisticLikes] = useOptimistic(initialLikes);
  
  async function handleLike() {
    setOptimisticLikes(likes + 1);  // Immediate UI update
    await likePost(postId);          // Server call in background
  }
  
  return <button onClick={handleLike}>❤️ {likes}</button>;
}

// app/dashboard/page.tsx
import { Suspense } from 'react';

// This page has a STATIC shell + DYNAMIC content
export default function Dashboard() {
  return (
    <div>
      {/* Static — generated at build time, served from CDN instantly */}
      <header>
        <nav>...</nav>
        <Logo />
      </header>
      <main>
        <h1>Dashboard</h1>
        
        {/* Dynamic — streamed in after static shell loads */}
        <Suspense fallback={<MetricsSkeleton />}>
          <LiveMetrics />  {/* Fetches real-time data per request */}
        </Suspense>
        
        <Suspense fallback={<RecentOrdersSkeleton />}>
          <RecentOrders />
        </Suspense>
      </main>
    </div>
  );
}

// app/actions/cart.ts
'use server'

export async function addToCart(productId: string, quantity: number) {
  const session = await getSession();
  
  if (!session?.userId) {
    redirect('/login');
  }
  
  await db.cartItem.upsert({
    where: { userId_productId: { userId: session.userId, productId } },
    create: { userId: session.userId, productId, quantity },
    update: { quantity: { increment: quantity } }
  });
  
  revalidatePath('/cart');
}

// Usage in a Client Component — no API route needed
'use client'
function AddToCartButton({ productId }: { productId: string }) {
  return (
    <button formAction={addToCart.bind(null, productId, 1)}>
      Add to Cart
    </button>
  );
}

// routes/products.$id.tsx
import { useLoaderData, useActionData, Form } from 'react-router';
import type { Route } from './+types/products.$id';

// Server-side data loading
export async function loader({ params }: Route.LoaderArgs) {
  const product = await getProduct(params.id);
  if (!product) throw new Response('Not Found', { status: 404 });
  return { product };
}

// Server-side mutation
export async function action({ request, params }: Route.ActionArgs) {
  const formData = await request.formData();
  const intent = formData.get('intent');
  
  if (intent === 'delete') {
    await deleteProduct(params.id);
    return redirect('/products');
  }
  
  const updates = Object.fromEntries(formData);
  const errors = validateProduct(updates);
  if (errors) return { errors };
  
  await updateProduct(params.id, updates);
  return { success: true };
}

// Component — loader data available without extra hooks
export default function ProductDetail({ loaderData }: Route.ComponentProps) {
  const { product } = loaderData;
  
  return (
    <div>
      <h1>{product.name}</h1>
      <Form method="post">
        <input name="name" defaultValue={product.name} />
        <button name="intent" value="save">Save</button>
        <button name="intent" value="delete">Delete</button>
      </Form>
    </div>
  );
}