Mastering React Server Components

React Server Components (RSC) represent a fundamental shift in how we architect React applications. By running on the server and emitting a serialized representation of the UI, they allow us to keep heavy dependencies away from the client bundle.

Why RSC?

1. Zero Bundle Size: Components rendered exclusively on the server do not add to the JavaScript bundle size downloaded by the client.
2. Direct Backend Access: You can securely access your database directly from a React component without creating an intermediary API route.

// page.tsx
import { db } from "@/lib/db"

export default async function Page() {
  const data = await db.query.users.findMany();
  return <div>{JSON.stringify(data)}</div>
}

This paradigm simplifies data fetching and dramatically improves initial page load times.