React Server Components: A Deep Dive Into the Future of React

React Server Components (RSC) have been available since Next.js 13 App Router. But most developers still treat them like client components with a "use server" badge. Let's fix that.

What RSC Actually Is

Server Components run only on the server. They:

• Have zero client-side JS footprint
• Can directly access databases, file systems, env vars
• Cannot use useState, useEffect, browser APIs
• Compose with Client Components

// app/posts/page.tsx — this runs on the server
// No 'use client' = Server Component by default
 
async function PostsPage() {
  // Direct DB query. No API route needed.
  const posts = await db.post.findMany();
  
  return (
    <div>
      {posts.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  );
}

The Mental Model Shift

The Waterfall Problem (And Fix)

// ❌ Sequential — each awaits the previous
const user = await getUser();
const posts = await getPosts(user.id);
const comments = await getComments(posts[0].id);
 
// ✅ Parallel — all fire at once
const [user, posts] = await Promise.all([
  getUser(),
  getPosts()
]);

When to Use Client Components

Use 'use client' when you need:

• useState / useReducer
• useEffect / lifecycle
• Browser APIs (window, localStorage)
• Event listeners (onClick, onChange)
• Third-party client-side libraries

The Real Win

In a traditional SPA, you'd ship 200KB of JS to render a page that reads from a DB. With RSC, that same page ships 0KB of component JS — the HTML comes pre-rendered.

This is not incremental improvement. It's architectural shift.