React Server Components (RSC): Architecture & Mental Model

1// 1. SERVER COMPONENT (Default in Next.js App Router)
2// Runs ONLY on server: Direct DB access, 0KB JS in client bundle!
3import db from '@/lib/db';
4import { ClientSearchDrawer } from './ClientSearchDrawer';
5
6export async function ProductDashboard() {
7  // Direct async await database query inside component!
8  const products = await db.products.findMany({ take: 10 });
9
10  return (
11    <div className="dashboard">
12      <h1>Catalog Overview</h1>
13
14      {/* Composing Server Component children inside a Client Component */}
15      <ClientSearchDrawer>
16        {/* This child still executes on the server! Zero bundle cost! */}
17        <ProductGrid products={products} />
18      </ClientSearchDrawer>
19    </div>
20  );
21}
22
23// 2. SERVER COMPONENT: Zero JS sent to client
24function ProductGrid({ products }: { products: any[] }) {
25  return (
26    <ul>
27      {products.map((p) => (
28        <li key={p.id}>{p.name} - ${p.price}</li>
29      ))}
30    </ul>
31  );
32}
33
34// 3. CLIENT COMPONENT (Must specify "use client" directive)
35// 'use client';
36// export function ClientSearchDrawer({ children }: { children: React.ReactNode }) {
37//   const [isOpen, setIsOpen] = useState(false);
38//   return (
39//     <div>
40//       <button onClick={() => setIsOpen(!isOpen)}>Toggle Drawer</button>
41//       {isOpen && <aside>{children}</aside>}
42//     </div>
43//   );
44// }