Understanding React Server Components (Next.js 15)

The Old Way (Client-Side Rendering)

For years, React applications sent a massive JavaScript bundle to the user's browser. The browser had to download it, parse it, and execute it just to show a basic page. This was terrible for performance and SEO.

The Paradigm Shift: RSC

React Server Components (RSC) allow components to render entirely on the server. They have direct access to your database. They generate pure HTML and send it to the client. Zero JavaScript is shipped to the browser for these components.

// This component never ships to the browser!
export default async function UserProfile() {
  // Direct database call inside a React component!
  const user = await db.query('SELECT * FROM users LIMIT 1');
  return <h1>Hello, {user.name}</h1>;
}

When to use 'use client'

You only add 'use client' at the top of a file if that specific component requires interactivity (like an onClick event, useState, or browser APIs). Keep the client components as small 'leaves' on your server component 'tree'.