Understanding Component Boundaries
In Next.js App Router, components are Server Components by default. Understanding when and why to use each is crucial.
When to Use Server Components
- ✅ Fetching data
- ✅ Accessing backend resources directly
- ✅ Keeping sensitive data on server (API keys, tokens)
- ✅ Large dependencies that shouldn't ship to client
- ✅ SEO-critical content
When to Use Client Components
- ✅ Interactivity (onClick, onChange, etc.)
- ✅ useState, useEffect, useReducer
- ✅ Browser APIs (localStorage, geolocation)
- ✅ Custom hooks that use state/effects
- ✅ React Context providers
The Boundary Rule
Key Rule: Once you mark a component as 'use client', ALL of its imports become Client Components automatically.