React Server Components

React Server Components (RSC) represent the biggest paradigm shift in React since the introduction of Hooks.

Introduced experimentally in late 2020 and stabilized in Next.js 13+, RSCs allow you to write components that run exclusively on the server and never ship any JavaScript to the client.

The Problem with Traditional SSR

In traditional Server-Side Rendering (SSR), the server renders the HTML, but the browser still has to download the entire React component codebase to perform Hydration.

If you use a massive 5MB Markdown parsing library to render a blog post on the server, that 5MB library still gets bundled and sent to the user’s browser, even though it’s only needed for the initial render.

How Server Components Fix This

A Server Component executes on the server, generates raw UI (a special JSON format, not HTML), and sends that UI to the client. The code for the Server Component is never sent to the browser.

Because they never run in the browser, Server Components:

Have Zero Bundle Size: You can import massive libraries (like heavy date formatters or markdown parsers) with zero impact on the user’s download size.
Have Direct Access to Backend Resources: You can write standard Node.js code directly inside a component. You can query a database, read from the filesystem, or use secret API keys without exposing them.

// This is a Server Component!
// It runs on the server. The client NEVER sees this code.
import db from './database';
import HeavyMarkdownParser from 'heavy-markdown-parser';

export default async function BlogPost({ id }) {
  // Direct database access inside a component!
  const post = await db.posts.find(id); 
  
  // Using a massive library with zero client-side penalty!
  const htmlContent = HeavyMarkdownParser.parse(post.content);

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
    </article>
  );
}

The Limitations of Server Components

Because Server Components never execute in the browser, they are completely static from the client’s perspective.

No Interactivity: You cannot use onClick, onChange, or any DOM event handlers.
No State: You cannot use useState or useReducer.
No Lifecycles: You cannot use useEffect or useLayoutEffect.
No Browser APIs: You cannot access window, document, or localStorage.

The “Client Component”

To add interactivity back into your application, you must use Client Components.

A Client Component is just a standard, traditional React component (the kind you’ve always written). In the RSC paradigm, you explicitly mark a file as a Client Component using the "use client" directive at the top of the file.

"use client"; // This tells the bundler: send this to the browser!

import { useState } from 'react';

export default function LikeButton() {
  const [likes, setLikes] = useState(0);
  return <button onClick={() => setLikes(l => l + 1)}>Like ({likes})</button>;
}

The magic of RSC is combining these two types of components to create apps that are highly interactive but have incredibly small JavaScript bundles.

Interview Questions

Q: What is a React Server Component (RSC)?
A: RSC is a paradigm where certain React components run exclusively on the server and never ship any JavaScript code to the browser. They can securely access backend resources (like databases or file systems) directly, and output pure, static UI data chunks to the client.