React Server Components represent a new paradigm in React development, allowing components to render on the server.
## What are Server Components?
Server Components are React components that run exclusively on the server:
```typescript
// This is a Server Component by default in Next.js App Router
export default async function BlogPost({ slug }: { slug: string }) {
const post = await db.post.findUnique({ where: { slug } });
return (
{post.title}
{post.content}
);
}
```
## Benefits
- **Zero Bundle Size**: Server Components don't ship to the client
- **Direct Database Access**: No need for API routes
- **Automatic Code Splitting**: Better performance
- **Server-Side Data Fetching**: Faster initial page load
## Client vs Server Components
| Feature | Server Component | Client Component |
|---------|-----------------|------------------|
| Data Fetching | ✅ Direct | ❌ Requires API |
| Interactivity | ❌ No | ✅ Yes |
| Bundle Size | ✅ Zero | ❌ Counted |
| State | ❌ No | ✅ Yes |
## When to Use
Use Server Components when:
- Fetching data from a database
- Accessing backend resources
- Keeping sensitive information on the server
Use Client Components when:
- Using interactivity (onClick, onChange, etc.)
- Using React hooks (useState, useEffect, etc.)
- Using browser-only APIs