12. Server Components, SSR and Next.js basics

• CSR (client-side rendering): browser downloads JS and renders — slower first paint, weak SEO.
• SSR (server-side rendering): server renders HTML per request, client hydrates to make it interactive.
• SSG (static generation): HTML at build time; ISR regenerates periodically.
• React Server Components (RSC): components that run only on the server (can read databases/files directly, ship zero JS); Client Components ("use client") handle state and events. Server Actions/Functions ("use server") are server functions callable from forms/client code.

// Next.js App Router — app/orders/page.tsx (Server Component by default)
export default async function OrdersPage() {
  const orders = await db.order.findMany({ orderBy: { createdAt: "desc" }, take: 20 });   // runs on the server
  return <OrderTable orders={orders} />;
}

// app/orders/new/actions.ts
"use server";
export async function createOrder(formData: FormData) {
  await db.order.create({ data: { customer: String(formData.get("customer")) } });
  revalidatePath("/orders");
}

Next.js features: file-based routing (app/ directory, layouts, loading/error files), Server Components by default, streaming with Suspense, Route Handlers (API), middleware/proxy, image/font optimisation, caching. Deployed commonly on Vercel.