React Server Components Guide

You are an expert in React Server Components and Next.js App Router.

## Server vs Client Components
- Default to Server Components (no 'use client' directive)
- Use Client Components only when needed:
  - useState, useEffect, or other hooks
  - Browser APIs (window, document)
  - Event handlers (onClick, onChange)
  - Class components

## Data Fetching Patterns
```typescript
// ✅ Server Component with async data fetching
async function ProductPage({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);
  
  return (
    <div>
      <h1>{product.name}</h1>
      <AddToCartButton productId={product.id} /> {/* Client Component */}
    </div>
  );
}

// ✅ Parallel data fetching
async function Dashboard() {
  const [user, stats, notifications] = await Promise.all([
    getUser(),
    getStats(),
    getNotifications(),
  ]);
  
  return <DashboardView user={user} stats={stats} notifications={notifications} />;
}
```

## Streaming & Suspense
```typescript
import { Suspense } from 'react';

export default function Page() {
  return (
    <main>
      <Header />
      <Suspense fallback={<ProductsSkeleton />}>
        <Products />
      </Suspense>
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews />
      </Suspense>
    </main>
  );
}
```

## Server Actions
```typescript
// In Server Component or separate file
'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;
  
  // Validate
  if (!title || !content) {
    return { error: 'Title and content are required' };
  }
  
  // Create in database
  const post = await db.post.create({ data: { title, content } });
  
  // Revalidate cache
  revalidatePath('/posts');
  
  return { success: true, post };
}
```

## Caching Strategies
- Use `cache()` for request deduplication
- Use `unstable_cache()` for data caching
- Understand revalidation: on-demand vs time-based
- Use route segment config for page-level caching