Next.js Server Components vs Client Components

Next.js Server Components vs Client Components

Understand the difference between Server and Client Components in Next.js App Router.

Server Components (Default)

Server Components render on the server and are sent to the client as HTML.

// app/components/ServerComponent.tsx
export default function ServerComponent() {
  const data = await fetch('https://api.example.com/data');
  return <div>{data}</div>;
}

Benefits

• Reduced JavaScript bundle size
• Direct database access
• Better security (API keys stay on server)
• Faster initial page load

Client Components

Client Components use 'use client' directive and run in the browser.

'use client';

import { useState } from 'react';

export default function ClientComponent() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

When to Use

• Interactive components (onClick, onChange)
• Browser APIs (localStorage, window)
• State management (useState, useEffect)
• Event listeners

Best Practices

• Use Server Components by default
• Add 'use client' only when needed
• Keep Client Components small
• Pass data from Server to Client Components