React Server Components Explained Simply

React Server Components (RSC) are confusing because they change a fundamental assumption: not all components need to run in the browser. Some components only need to render once on the server, and sending their JavaScript to the client is wasteful.

The Core Idea

Server Components render on the server and send HTML to the client. They never re-render in the browser. This means they can directly access databases, file systems, and APIs without exposing that logic to the client:

// This component runs ONLY on the server
async function RecentPosts() {
    const posts = await db.query("SELECT * FROM posts ORDER BY date DESC LIMIT 5");

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

Notice the async keyword — Server Components can be async functions. No useEffect, no loading states, no waterfall requests. The data is fetched and rendered before anything reaches the browser.

Client Components Still Exist

Any component that needs interactivity — click handlers, state, effects — must be a Client Component. You mark them with "use client" at the top of the file:

"use client";

import { useState } from "react";

function LikeButton({ postId }) {
    const [liked, setLiked] = useState(false);
    return <button onClick={() => setLiked(!liked)}>{liked ? "Liked" : "Like"}</button>;
}

The Mental Model

Think of it this way: Server Components handle data fetching and static rendering. Client Components handle interactivity. You compose them together — a Server Component can render a Client Component as a child, passing data down as props.

The practical benefit is smaller JavaScript bundles. If a component just displays data and has no interactivity, its code never ships to the browser. On content-heavy sites, this can reduce bundle sizes dramatically.