server-components

# React Server Components RSC + Next.js App Router patterns for streaming, caching, and minimal client JS. ## RSC vs Client Components Decision Matrix ``` Use Server Component (default) when: - Fetching data from DB / API - Accessing backend resources (filesystem, secrets) - No interactivity (useState, useEffect, event listeners) - Heavy dependencies (no bundle cost) Use Client Component ("use client") when: - useState / useReducer / useRef - useEffect / lifecycle hooks - Browser APIs (window, navigator, IntersectionObserver) - Event listeners (onClick, onChange) - Third-party client libraries (charts, drag-drop) Rule: Push "use client" as LOW in the tree as possible. ``` ## "use client" / "use server" Directives ```typescript // app/dashboard/page.tsx — Server Component (no directive needed) import { db } from '@/lib/db' import { StatsCounter } from './stats-counter' // client component export default async function DashboardPage() { const stats = await db.query.stats.findMany() // Can pass serializable props to client components return <StatsCounter initialCount={stats.length} /> } // app/dashboard/stats-counter.tsx — Client Component 'use client' import { useState } from 'react' export function StatsCounter({ initialCount }: { initialCount: number }) { const [count, setCount] = useState(initialCount) return <button onClick={() => setCount(c => c + 1)}>{count}</button> } // Server Action in separate file // app/actions.ts 'use server' ...