React Server Components: A Practical Deep Dive

After six months running React Server Components in production, I have Opinions™.

The Mental Model Shift

RSC forces you to think about where your data lives and when it's needed. The key insight: server components render once on the server and ship HTML + a serialized component tree. No hydration overhead.

// This runs ONLY on the server — no client bundle weight
async function PostList() {
  const posts = await db.query.posts.findMany({
    orderBy: (p, { desc }) => desc(p.createdAt),
    limit: 10,
  });

  return (
    <ul>
      {posts.map((post) => (
        <PostCard key={post.id} post={post} />
      ))}
    </ul>
  );
}

Component Boundary Rules

- Server Component: async, data fetching, no hooks, no browser APIs

- Client Component: add "use client", can use hooks and browser APIs

- Shared: pure render logic, no side effects

Production Gotchas