What Are Server Components?
React Server Components (RSC) run only on the server. They never ship JavaScript to the browser, resulting in smaller bundles and faster load times.
Server vs Client Components
| Aspect | Server Component | Client Component |
|---|---|---|
| Runs on | Server only | Server + Client |
| JS sent to browser | None | Yes |
| Can use hooks | No | Yes |
| Can use browser APIs | No | Yes |
| Can fetch data | Directly | Via API |
| File marker | Default in App Router | "use client" |
When to Use Each
Use Server Components For:
- Fetching data from database
- Displaying static content
- Components without interactivity
- Large dependencies (keep them server-side)
Use Client Components For:
- Interactive UI (buttons, forms)
- Using React hooks (useState, useEffect)
- Browser APIs (localStorage, window)
- Event handlers (onClick, onChange)
Performance Benefits
Before (Traditional React)
- All components shipped to browser
- Data fetching via API calls
- Larger JavaScript bundles
After (Server Components)
- Only interactive code shipped to browser
- Direct data access on server
- Significantly smaller bundles
Common Patterns
Pattern 1: Fetch in Server, Pass to Client
- Server component fetches data
- Passes data as props to client component
- Client component handles interactivity
Pattern 2: Composition
- Server component wraps client children
- Server handles data, client handles UI
- Mix and match as needed
Common Mistakes to Avoid
- Adding "use client" unnecessarily - Default to server
- Trying to use hooks in Server Components - Not allowed
- Passing functions as props from Server to Client - Won't work
- Not leveraging direct data access - Use it!
Conclusion
Server Components are a paradigm shift in React development. They let you build faster, more efficient applications by keeping heavy logic on the server.
Want help implementing Server Components? Contact me.