react-server-components

React Server Components

Build performant applications with React Server Components and Next.js App Router.

Core Workflow

1. Understand RSC model: Server vs client components
2. Design component tree: Plan server/client boundaries
3. Implement data fetching: Fetch in server components
4. Add interactivity: Client components where needed
5. Enable streaming: Suspense for progressive loading
6. Optimize: Minimize client bundle size

Server vs Client Components

Key Differences

Feature	Server Components	Client Components
Rendering	Server only	Server + Client
Bundle size	Zero JS sent	Adds to bundle
Data fetching	Direct DB/API access	useEffect/TanStack Query
State/Effects	No hooks	Full React hooks
Event handlers	No	Yes
Browser APIs	No	Yes
File directive	Default (none)	'use client'

When to Use Each

Server Components (Default)

• Static content
• Data fetching
• Backend resource access
• Large dependencies (markdown, syntax highlighting)
• Sensitive logic/tokens

Client Components

• Interactive UI (onClick, onChange)
• useState, useEffect, useReducer
• Browser APIs (localStorage, geolocation)
• Custom hooks with state
• Third-party client libraries

Basic Patterns

Server Component (Default)

// app/users/page.tsx (Server Component - no directive needed)
import { db } from '@/lib/db';

async function getUsers() {
  return db.user.findMany({
    orderBy: { createdAt: 'desc' },
  });
}

export default async function UsersPage() {
  const users = await getUsers();

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

Client Component

// components/Counter.tsx
'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}