React Server Components

Server Components render on server, reducing client bundle.

Server Component (Default)

```javascript // 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:

```javascript '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

```javascript // 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!