React Server Components

React Server Components (RSC) represent a significant shift in how we build web applications. By allowing components to run exclusively on the server, we can reduce bundle sizes and improve data fetching patterns.

Why RSC?

• Zero Bundle Size: Server components don't ship any JavaScript to the client.
• Direct Access to Backend: Fetch data directly from your database or file system.
• Improved Performance: Reduced hydration costs on the client.

Example: A Simple Server Component

// src/components/UserList.tsx (Server Component)
import { db } from "@/lib/db";

export default async function UserList() {
  const users = await db.user.findMany();

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Conclusion

RSC is not a replacement for client components, but a powerful addition to our toolkit.