React Server Components (RSC): Zero-Bundle Server Architecture

For over a decade, React was purely a client-side library: all component JavaScript was downloaded, parsed, and executed inside the visitor's browser. As web applications grew, bundle sizes ballooned to several megabytes, slowing down initial page loads on mobile networks.

React Server Components (RSC) fundamentally redefine this architecture: components can now run exclusively on the server, query databases directly with async/await, and stream rendered UI to the client with zero JavaScript bundle overhead.

Figure 14: Server Components (Zero Bundle Overhead, Direct DB Access) vs Client Components ('use client' Interactivity).

Direct Database Access in an async Server Component

// app/components/StudentLeaderboard.jsx (Server Component - Default)
// Note: Zero 'use client' directive! Runs ONLY on the Node server.
import db from '@/lib/db'; // Direct SQL database connection

export default async function StudentLeaderboard() {
  // Direct async query to database with NO client-side fetch or useEffect needed!
  const topStudents = await db.query('SELECT id, name, gpa FROM students ORDER BY gpa DESC LIMIT 5');

  return (
    <div className="leaderboard-card">
      <h3>Top Ranked Computer Science Students</h3>
      <ul>
        {topStudents.map(student => (
          <li key={student.id}>
            <b>{student.name}</b> - GPA: {student.gpa}
          </li>
        ))}
      </ul>
    </div>
  );
}