Understanding React Server Components

React Server Components (RSC) represent one of the biggest shifts in the React ecosystem. They allow us to render components on the server and stream html to the client, reducing bundle sizes and improving initial load performance.

What problem do they solve?

Traditionally, React apps were either:

1. Client-side rendered (CSR): Great interactivity, but large bundles and slow initial load.
2. Server-side rendered (SSR): Fast initial load, but hydration was expensive.

RSCs give us the best of both worlds.

Key Benefits

• Zero Bundle Size: Server components are not included in the JS bundle downloaded by the browser.
• Direct Backend Access: You can query databases directly inside your components without API routes.
• Improved Performance: Less JavaScript means faster TTI (Time to Interactive).

// This component runs ONLY on the server
export default async function dbComponent() {
  const data = await db.query("SELECT * FROM posts");
  return (
    <div>
      {data.map((post) => (
        <p>{post.title}</p>
      ))}
    </div>
  );
}

This paradigm shift requires a new mental model, but the performance gains are worth it.