Understanding Server Components in React (with Next.js)

Modern web development has evolved significantly, moving from client-heavy applications to more intelligent server-driven architectures. In this post, we’ll look at the traditional rendering methods — Client-Side Rendering (CSR) and Server-Side Rendering (SSR) — and understand how React Server Components (RSC) solve their limitations to deliver better performance, SEO, and developer experience.

Client-Side Rendering (CSR)

How It Works

Client-Side Rendering means the browser is responsible for rendering the entire UI after downloading a JavaScript bundle. Here’s a simplified flow:

1. User visits your website.
2. The browser sends an HTTP request to your server.
3. The server returns an HTML shell with a reference to your JavaScript bundle.
4. The browser downloads the bundle (which could be large — 50MB or more).
5. React initializes and mounts the app.
6. Dynamic data is fetched via useEffect.
7. Finally, the user sees the rendered content.

Drawbacks of CSR

• Poor User Experience: Users often stare at a blank screen or a loading spinner while JavaScript loads.
• Large JavaScript Bundles: The entire UI is dependent on the JS bundle, which grows with app complexity.
• SEO Challenges: Search engines often can’t parse dynamic content loaded via JavaScript, which can hurt rankings.

Server-Side Rendering (SSR)

How It Works

Server-Side Rendering shifts rendering responsibility to the server. Here’s the flow:

1. User visits your website.
2. The server receives the request and fetches data (from DBs or APIs).
3. The server renders the HTML using React and sends it to the browser.
4. The browser shows a fully-formed HTML page instantly.
5. JavaScript is downloaded in the background.
6. React hydrates the page — adding interactivity like event listeners.

Benefits of SSR

• Faster First Contentful Paint (FCP): Content is visible faster.
• SEO-Friendly: Since the HTML already includes real data, crawlers can index it effectively.

Limitations of SSR

SSR sends JavaScript for every component, whether it needs interactivity or not. If you have 200 components:

• Each component might weigh 1MB.
• That’s 200MB of JavaScript — even if only 50 of them are interactive.
• This leads to:
  • Long hydration times
  • Bloated bundle size
  • Slower interaction performance

Server Components: A New Approach

What Are Server Components?

Server Components are a new React feature (available in Next.js 13+ with the App Router). They allow parts of your React application to run entirely on the server — and never ship JavaScript to the client.

Key Benefits

• Heavy, non-interactive components stay on the server.
• The client receives just HTML and minimal JavaScript.
• Faster hydration and lower JavaScript execution time.
• Reduced bundle sizes.
• Better INP (Interaction to Next Paint) and overall performance.

Core Principle

Only send JavaScript for components that require interactivity.

By sending JavaScript only for BuyButton and ThemeToggle, your bundle size drops drastically.

What Is the RSC Payload?

The Missing Piece in the Pipeline

When a React Server Component is rendered on the server, it doesn't send actual HTML for each component to the client. Instead, it sends a special serialized format called the RSC payload.

What It Contains

The RSC payload is a stream of instructions — essentially a lightweight representation of the component tree. It includes:

• The React component structure (in a serialized format)
• References to client components (like <BuyButton />)
• Dynamic props and server-fetched data
• Markers to help React understand which parts are interactive

How It Works Behind the Scenes

1. The server renders your RSCs.
2. Instead of HTML, it generates an RSC payload.
3. This payload is streamed to the client.
4. React on the client parses the RSC payload and constructs the static UI.
5. For parts that are interactive (client components), hydration happens separately by loading their JavaScript.

The RSC payload acts like a blueprint. It tells React what to render, without shipping any of the logic or interactivity unless needed.

Why It's Efficient

• It's smaller than full HTML.
• It avoids shipping unnecessary JavaScript.
• It allows the client and server to collaborate — the server sends structure and data, and the client hydrates only where needed.

Final Thoughts

React Server Components are not just an optimization — they represent a shift in how we think about rendering on the web.

It’s not about choosing between server or client rendering, but about deciding what to render where.

By rendering static, non-interactive components on the server and shipping only what’s necessary to the browser, we can build faster, more scalable, and more SEO-friendly web apps.

Further Reading

• The Art of Web Interfaces: Building Simple, Smooth, and Smart Experiences