Introduction to React Server Components — What They Are and Why They Matter

In this tutorial, you will learn about Introduction to React Server Components. We cover key concepts, practical examples, and best practices to help you master this topic.

React Server Components are a new React paradigm that renders components exclusively on the server, sending only HTML to the client while keeping data fetching and heavy dependencies off the browser.

What You'll Learn

You will understand what React Server Components are, how they differ from traditional server-side rendering and client-side rendering, and when to adopt them in your projects.

Why It Matters

React Server Components reduce the JavaScript bundle sent to the browser, improve initial page load performance, and simplify data fetching by running database queries and API calls directly on the server without exposing credentials to the client.

Real-World Use

Durga Antivirus Pro uses React Server Components in its admin dashboard to render large tables of threat data on the server, sending only the rendered HTML to the browser and cutting JavaScript bundle size by 40 percent.

flowchart LR
    A[Browser Request] --> B[Server]
    B --> C{RSC Render}
    C --> D[Async Data Fetching]
    C --> E[Direct DB Query]
    D --> F[Rendered HTML]
    E --> F
    F --> G[Client Receives HTML]
    G --> H[Client Components Hydrate]
    style B fill:#1e293b,color:#fff
    style F fill:#0f172a,color:#fff

Understanding the Three Rendering Approaches

Before React Server Components existed, developers chose between two rendering strategies. Each has trade-offs.

Client-Side Rendering (CSR)

The browser downloads the entire JavaScript bundle, renders the app in the browser, and fetches data after the initial render.

function UserProfile() {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetch('/api/user').then(res => res.json()).then(setUser);
  }, []);
  if (!user) return <p>Loading...</p>;
  return <h1>{user.name}</h1>;
}

Expected output: The page shows "Loading..." while JavaScript downloads and executes, then displays the user name after the API call completes.

Server-Side Rendering (SSR)

The server renders React components to HTML on each request. The browser receives HTML immediately but still needs to download JavaScript for hydration.

export async function getServerSideProps() {
  const user = await fetch('https://api.example.com/user').then(r => r.json());
  return { props: { user } };
}
export default function Page({ user }) {
  return <h1>{user.name}</h1>;
}

Expected output: HTML arrives pre-rendered, but the React runtime and component code still download for the page to become interactive.

React Server Components (RSC)

Components run once on the server, fetch data directly, and the rendered output streams to the client. No JavaScript is sent for these components.

async function UserProfile() {
  const user = await db.users.findById(id);
  return <h1>{user.name}</h1>;
}

Expected output: The server queries the database directly, renders the user name as HTML, and sends it to the client. No hydration needed for this component.

Why React Server Components Were Created

The React team noticed that many components do not need interactivity. A product description, a blog post, or a user profile simply displays data. Forcing these components to download JavaScript, hydrate, and re-render on the client wastes bandwidth and battery.

RSC solve this by letting you choose which components run on the server. Interactive parts use Client Components. Static data-driven parts use Server Components. You get the best of both worlds.

Common Mistakes

1. Assuming RSC replace SSR entirely: RSC and SSR serve different purposes. RSC handle component-level rendering while SSR handles the initial HTML shell. Next.js App Router uses both together.

2. Trying to use hooks in Server Components: Hooks like useState, useEffect, and useContext only work in Client Components. Server Components cannot use any React hooks.

3. Passing non-serializable props across the boundary: Functions, class instances, and symbols cannot be passed from Server Components to Client Components. Only plain objects, arrays, strings, numbers, booleans, and null are allowed.

4. Putting use client at the top of every file: Only mark files with 'use client' when they need interactivity. Default to Server Components and add the directive only where necessary.

5. Thinking RSC are Next.js-specific: React Server Components are a React feature. While Next.js App Router popularized them, other frameworks like Remix and RedwoodJS also support them.

Practice Questions

1. What is the main difference between CSR and RSC?

CSR renders components in the browser after JavaScript downloads. RSC render on the server and send only HTML to the client without shipping component JavaScript.

2. Why would you choose RSC over traditional SSR?

RSC keep the component code and its dependencies on the server, reducing the client-side JavaScript bundle. SSR still ships the component code to the browser for hydration.

3. Can a Server Component use useState?

No. useState is a React hook that requires client-side runtime. Only Client Components (marked with 'use client') can use hooks.

4. What problem do RSC solve for data fetching?

RSC let you fetch data directly in the component using async/await without useEffect, getServerSideProps, or any client-side data fetching library.

5. How do RSC affect the initial page load?

RSC improve initial page load by sending pre-rendered HTML without requiring JavaScript download and execution for every component.

Challenge

Create a simple page with one Server Component that fetches a list of items from a database and renders them, and one Client Component that handles a button click to toggle visibility of the list.

Frequently Asked Questions

Mini Project

Build a blog listing page using a Server Component that fetches posts from a database, renders titles and excerpts, and wraps each post excerpt in a Client Component that expands to show the full content on click.

What's Next

Now that you understand what React Server Components are, continue to Server vs Client Components to learn when to use each type.