Server Components vs Client Components

The RSC Mental Model

In the App Router, every component is a Server Component by default. Add "use client" at the top of a file only when you need browser APIs, event handlers, or React hooks.

Rules of Thumb

• Fetch data → Server Component
• Use useState / useEffect → Client Component
• Access window or document → Client Component
• Render heavy static markup → Server Component (zero JS sent to client)