What are the main performance benefits of using server components compared to rendering everything on the client?

Server components reduce the amount of JavaScript sent to the browser since their code never needs to run client side, they can access backend resources like databases directly without an extra API layer, and they allow sensitive logic and credentials to stay completely hidden from the browser.

// Direct database access with no API layer needed
import { db } from '@/lib/db';

export default async function Page() {
  const users = await db.user.findMany();
  return <UserList users={users} />;
}