Server Components

Server vs Client Components

// Server Component (default in App Router)
// Can: fetch data, access backend, use async/await
// Cannot: use hooks, browser APIs, event handlers
async function ProductList() {
  const products = await db.products.findMany();
  return (
    <ul>
      {products.map(p => )}
    </ul>
  );
}

// Client Component (explicit)
'use client';

function AddToCartButton({ productId }: { productId: string }) {
  const [loading, setLoading] = useState(false);
  return (
    <button onClick={() => addToCart(productId)} disabled={loading}>
      Add to Cart
    </button>
  );
}

Data Fetching Pattern

// app/products/page.tsx

  // Runs on server only - no client bundle impact
  const products = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 } // Cache for 1 hour
  }).then(res => res.json());

  return ;
}

// Parallel data fetching
async function Dashboard() {
  const [user, orders, recommendations] = await Promise.all([
    getUser(),
    getOrders(),
    getRecommendations(),
  ]);

  return (
    <>
      
      
      
    </>
  );
}

Streaming with Suspense

async function SlowComponent() {
  const data = await slowFetch(); // 3 second API call
  return <div>{data}</div>;
}

  return (
    <main>
      <h1>Dashboard</h1>
      

      }>
        
      
    </main>
  );
}

Passing Data Server → Client

// Server Component
async function ProductPage({ id }: { id: string }) {
  const product = await getProduct(id);

  // Pass serializable data to client
  return (
    <div>
      <h1>{product.name}</h1>
      
      
    </div>
  );
}

Server Actions

// actions.ts
'use server';

  const title = formData.get('title') as string;
  await db.posts.create({ data: { title } });
  revalidatePath('/posts');
}

// page.tsx (Server Component)

  return (
    <form action={createPost}>
      <input name="title" required />
      <button type="submit">Create</button>
    </form>
  );
}

Quick Reference