Getting Started with Server Components in React

What Are Server Components?

React Server Components (RSC) represent a paradigm shift in how we think about building React applications. Unlike traditional client components, server components run exclusively on the server and send only the rendered HTML to the client.

Key Benefits

Zero Client Bundle Impact

Server components don't add any JavaScript to your client bundle:

tsx

1// This component ships ZERO JS to the client
2async function BlogList() {
3  const posts = await db.query("SELECT * FROM posts");
4
5  return (
6    <ul>
7      {posts.map((post) => (
8        <li key={post.id}>{post.title}</li>
9      ))}
10    </ul>
11  );
12}

Bundle Size

Server Components can significantly reduce your JavaScript bundle size, sometimes by 30-50% for content-heavy pages.

Direct Data Access

Server components can access databases, file systems, and APIs directly without an intermediate API layer:

tsx

1import { readFile } from "fs/promises";
2import path from "path";
3
4async function Config() {
5  const config = JSON.parse(
6    await readFile(path.join(process.cwd(), "config.json"), "utf-8"),
7  );
8
9  return <pre>{JSON.stringify(config, null, 2)}</pre>;
10}

When to Use Client Components

Not everything should be a server component. Use the "use client" directive when you need:

Interactivity — Event handlers, state, effects
Browser APIs — window, localStorage, navigator
Custom Hooks — Hooks that use state or effects

tsx

1"use client";
2
3import { useState } from "react";
4
5function Counter() {
6  const [count, setCount] = useState(0);
7
8  return <button onClick={() => setCount((c) => c + 1)}>Count: {count}</button>;
9}

Common Mistake

Don't add "use client" to every component. Start with server components and only add the directive when you need client-side interactivity.

Composition Pattern

The best pattern is composing server and client components together:

tsx

1// Server Component (default)
2async function PostPage({ slug }: { slug: string }) {
3  const post = await getPost(slug);
4
5  return (
6    <article>
7      <h1>{post.title}</h1>
8      <PostContent content={post.content} />
9      {/* Client component for interactivity */}
10      <LikeButton postId={post.id} />
11      <CommentSection postId={post.id} />
12    </article>
13  );
14}

Conclusion

Server Components are not replacing client components — they're complementing them. The key is choosing the right type for each part of your application:

Use Case	Component Type
Static content	Server
Data fetching	Server
Interactive UI	Client
Forms with state	Client
Heavy computations	Server

Build faster with less JavaScript.

ALENTINE