Server Components & React Server Components

Next.js 13+ Server Components: When to use Server vs Client components, data fetching patterns, streaming, Server Actions, hybrid architecture, performance benefits, and migration strategies.

🖥️ 1. Server vs Client Components

The million-dollar question: Server or Client? 🤔 Server Components run on the server (surprise!), ship zero JS to the browser, and can talk directly to your database. Client Components handle interactivity. Knowing when to use each is what separates the pros from the beginners!

🔴 Impact: CRITICAL — Getting the Server vs Client split right can cut your bundle size by 50%+ and massively boost performance! 🏋️

📋 In this section: Server Components (Default) • 'use client' Directive • Hybrid Architecture • When to Use Which

tsx

// ❌ WRONG: Using client component for static data
'use client';

import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users').then(res => res.json()).then(setUsers);
  }, []);

  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

Preview

Console

tsx

// ✅ CORRECT: Server Component (default)
// app/users/page.tsx - No 'use client' directive
async function UserList() {
  // This runs on the server
  const users = await fetchUsers();

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// ✅ Client Component only when needed
'use client';

import { useState } from 'react';

function InteractiveCounter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

// ✅ Hybrid: Server Component with Client Component
// app/dashboard/page.tsx (Server Component)
async function Dashboard() {
  const data = await fetchDashboardData();

  return (
    <div>
      <ServerDataDisplay data={data} />
      <InteractiveChart data={data} /> {/* Client Component */}
    </div>
  );
}

Preview

Console

📡 2. Data Fetching Patterns

Remember the useEffect + useState + loading + error dance? 💃 With Server Components, you just... await your data. That's it. No loading states to manage, no race conditions to worry about, no waterfall requests. It's so simple it almost feels like cheating!

🟠 Impact: HIGH — Server-side data fetching eliminates entire categories of bugs and makes your code 10x simpler! 🧹

📋 In this section: Async Server Components • Direct DB Access • No useEffect Needed • Automatic Caching

tsx

// Server Component pattern (client demo with mock data)
const MOCK_PRODUCTS = [
  { id: '1', name: 'React Guide', price: 29.99 },
  { id: '2', name: 'TypeScript Book', price: 34.99 },
];

function ProductList({ products }: { products: typeof MOCK_PRODUCTS }) {
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name} – ${p.price}</li>
      ))}
    </ul>
  );
}

function ProductsPage() {
  const products = MOCK_PRODUCTS;
  return (
    <div>
      <h1>Products</h1>
      <ProductList products={products} />
    </div>
  );
}

function App() { return <ProductsPage />; }
export default App;

Preview

Console

🎬 3. Server Actions

Server Actions are like magic wands for your forms! 🪄 Write a function, slap 'use server' on it, and boom — it runs on the server when your form submits. No API routes, no fetch calls, no boilerplate. Just pure, beautiful simplicity. This is the future of form handling!

🔴 Impact: CRITICAL — Server Actions replace entire API layers for mutations — this is a paradigm shift in how we handle forms! 🔄

📋 In this section: Form Submissions • useTransition with Forms • Optimistic Updates • Progressive Enhancement

tsx

// Client demo: form + useTransition (mock server action)
async function createUser(formData: FormData) {
  const name = formData.get('name') as string;
  const email = formData.get('email') as string;
  await new Promise((r) => setTimeout(r, 500));
  return { name, email };
}

function UserForm() {
  const [isPending, startTransition] = useTransition();
  const [result, setResult] = useState<string | null>(null);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    startTransition(async () => {
      const user = await createUser(formData);
      setResult(`Created: ${user.name} (${user.email})`);
    });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input name="name" placeholder="Name" required />
        <input name="email" type="email" placeholder="Email" required />
        <button type="submit" disabled={isPending}>
          {isPending ? 'Creating...' : 'Create User'}
        </button>
      </form>
      {result && <p style={{ marginTop: 8 }}>{result}</p>}
    </div>
  );
}

function App() { return <UserForm />; }
export default App;

Preview

Console

// ❌ WRONG: Using client component for static data

'use client';

import { useState, useEffect } from 'react';

function UserList() {

const [users, setUsers] = useState([]);

useEffect(() => {

fetch('/api/users').then(res => res.json()).then(setUsers);

}, []);

return (

<ul>

{users.map(user => <li key={user.id}>{user.name}</li>)}

</ul>

);

}

// ✅ CORRECT: Server Component (default)

// app/users/page.tsx - No 'use client' directive

async function UserList() {

// This runs on the server

const users = await fetchUsers();

return (

<ul>

{users.map(user => (

))}

</ul>

);

}

// ✅ Client Component only when needed

'use client';

import { useState } from 'react';

function InteractiveCounter() {

const [count, setCount] = useState(0);

return (

<button onClick={() => setCount(count + 1)}>

Count: {count}

</button>

);

}

// ✅ Hybrid: Server Component with Client Component

// app/dashboard/page.tsx (Server Component)

async function Dashboard() {

const data = await fetchDashboardData();

return (

<div>

<InteractiveChart data={data} /> {/* Client Component */}

</div>

);

}

// Server Component pattern (client demo with mock data)

const MOCK_PRODUCTS = [

{ id: '1', name: 'React Guide', price: 29.99 },

{ id: '2', name: 'TypeScript Book', price: 34.99 },

];

function ProductList({ products }: { products: typeof MOCK_PRODUCTS }) {

return (

<ul>

{products.map((p) => (

<li key={p.id}>{p.name} – ${p.price}</li>

))}

</ul>

);

}

function ProductsPage() {

const products = MOCK_PRODUCTS;

return (

<div>

<h1>Products</h1>

</div>

);

}

function App() { return <ProductsPage />; }

export default App;

// Client demo: form + useTransition (mock server action)

async function createUser(formData: FormData) {

const name = formData.get('name') as string;

const email = formData.get('email') as string;

await new Promise((r) => setTimeout(r, 500));

return { name, email };

}

function UserForm() {

const [isPending, startTransition] = useTransition();

const [result, setResult] = useState<string | null>(null);

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {

e.preventDefault();

const formData = new FormData(e.currentTarget);

startTransition(async () => {

const user = await createUser(formData);

setResult(`Created: ${user.name} (${user.email})`);

});

};

return (

<div>

{isPending ? 'Creating...' : 'Create User'}

</button>

</form>

{result && <p style={{ marginTop: 8 }}>{result}</p>}

</div>

);

}

function App() { return <UserForm />; }

export default App;