React Server Components

Server Components render on server, reducing client bundle.

Server Component (Default)

// app/page.js
async function Users() {
  const users = await fetch('https://api.example.com/users');
  const data = await users.json();

  return (
    <div>
      {data.map(user => <p key={user.id}>{user.name}</p>)}
    </div>
  );
}

Client Component

Add 'use client' for interactivity:

'use client';
import { useState } from 'react';

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

Mixing Both

// Server Component
import ClientCounter from './Counter'; // Client component

export default async function Page() {
  const data = await fetchData(); // Server-side

  return (
    <div>
      <h1>{data.title}</h1>
      <ClientCounter /> {/* Client interactivity */}
    </div>
  );
}

Remember

• Default = Server Component
• Use 'use client' for interactivity
• Reduces JavaScript bundle
• Better performance

Next: Learn Suspense patterns!