What Are Server Components?

React Server Components (RSC) let you write components that render exclusively on the server. They never ship JavaScript to the browser, resulting in dramatically smaller bundle sizes.

The Key Difference

// Server Component (default in Next.js App Router)
async function UserProfile({ id }) {
  const user = await db.user.findById(id); // Direct DB access!
  return <div>{user.name}</div>;
}

// Client Component (needs "use client" directive)
"use client";
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c + 1)}>{count}</button>;
}

When to Use Server Components

  • Data fetching — Access databases, APIs, file system directly
  • Large dependencies — Keep heavy libraries off the client bundle
  • Static content — Blog posts, documentation, product pages
  • SEO-critical pages — Full HTML delivered on first paint

When to Use Client Components

  • Interactivity — onClick, onChange, form inputs
  • Browser APIs — localStorage, geolocation, Web Audio
  • State management — useState, useReducer, context
  • Effects — useEffect, subscriptions, timers

Performance Impact

In real-world Next.js apps, RSC typically reduces:

  • JavaScript bundle size by 30-60%
  • Time to Interactive (TTI) by 40-50%
  • First Contentful Paint (FCP) by 20-30%

Best Practices

  1. Default to Server Components — Only add “use client” when needed
  2. Push client boundaries down — Keep interactive parts as small leaves
  3. Use Suspense boundaries — Show loading states for async data
  4. Avoid prop serialization issues — Don’t pass functions from server to client
  5. Leverage streaming — Use loading.tsx for progressive rendering