What Are React Server Components?

As a React developer with over eight years of experience, I’ve witnessed the framework evolve dramatically. One of the most exciting advancements recently is the introduction of React Server Components (RSC). They represent a new way to build React apps by shifting some rendering work from the client to the server, offering significant performance improvements.

When I first started experimenting with React Server Components, I was amazed at how they helped reduce JavaScript bundle sizes and improve page load times. If you’re curious about what React Server Components are, how they differ from traditional client components, and how to use them effectively, you’re in the right place.

In this article, I’ll break down React Server Components in simple terms, share practical examples, and explain when and why to use them in your projects.

What Are React Server Components?

React Server Components are React components that run exclusively on the server. Unlike traditional React components, which render on the client side (in the browser), Server Components generate HTML on the server and send it to the client without sending the component’s JavaScript code.

This means:

• No JavaScript bundle for Server Components on the client.
• Server Components can access server-side resources like databases or file systems directly.
• They reduce the amount of JavaScript the client needs to download and execute, improving performance.

Think of Server Components as a way to offload heavy lifting to the server, while Client Components handle interactive UI parts that require user input or browser APIs.

Use React Server Components

From my experience, here are the key benefits:

• Smaller Client Bundles: Since Server Components don’t ship their JavaScript to the client, your app’s bundle size can shrink dramatically.
• Faster Time to Interactive: Less JavaScript to parse and execute means users can interact with your app sooner.
• Improved SEO: Server-rendered content is immediately available to search engines.
• Seamless Data Fetching: Server Components can fetch data directly without needing extra client-side API calls or loading states.

How React Server Components Work: The Basics

React Server Components are designed to work alongside Client Components. Typically, your app will have a mix of both:

• Server Components: Rendered on the server, return static HTML.
• Client Components: Rendered on the client, handle interactivity.

Server Components can import Client Components, but Client Components cannot import Server Components.

Example: Build a Simple React App with Server Components

Let me walk you through a practical example. We’ll create a simple app that displays a list of US states with their capitals fetched from the server.

Step 1: Setup

For this example, I’ll use Next.js 13, which supports React Server Components out of the box.

npx create-next-app@latest react-server-components-demo
cd react-server-components-demo

Step 2: Create a Server Component to Fetch Data

Create a new file app/StatesList.jsx:

// app/StatesList.jsx
import React from 'react';

// This component runs on the server
export default async function StatesList() {
  // Simulate fetching data from a server or database
  const states = [
    { name: 'California', capital: 'Sacramento' },
    { name: 'Texas', capital: 'Austin' },
    { name: 'Florida', capital: 'Tallahassee' },
    { name: 'New York', capital: 'Albany' },
  ];

  return (
    <div>
      <h2>US States and Capitals</h2>
      <ul>
        {states.map((state) => (
          <li key={state.name}>
            {state.name} - {state.capital}
          </li>
        ))}
      </ul>
    </div>
  );
}

Step 3: Create a Client Component for Interactivity

Now, let’s add a simple client-side component that allows users to filter states by name.

Create app/StateFilter.jsx:

'use client'; // This directive makes this a client component

import React, { useState } from 'react';

export default function StateFilter({ states }) {
  const [query, setQuery] = useState('');

  const filteredStates = states.filter((state) =>
    state.name.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        placeholder="Search states..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        style={{ marginBottom: '10px', padding: '5px', width: '200px' }}
      />
      <ul>
        {filteredStates.map((state) => (
          <li key={state.name}>
            {state.name} - {state.capital}
          </li>
        ))}
      </ul>
    </div>
  );
}

Step 4: Combine Server and Client Components

Modify the main page app/page.jsx to use both:

import React from 'react';
import StatesList from './StatesList';
import StateFilter from './StateFilter';

export default async function Page() {
  // Fetch states on the server side
  const states = [
    { name: 'California', capital: 'Sacramento' },
    { name: 'Texas', capital: 'Austin' },
    { name: 'Florida', capital: 'Tallahassee' },
    { name: 'New York', capital: 'Albany' },
  ];

  return (
    <main style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>React Server Components Demo</h1>

      {/* Server-rendered states list */}
      <StatesList />

      <hr style={{ margin: '20px 0' }} />

      {/* Client-side interactive filter */}
      <StateFilter states={states} />
    </main>
  );
}

Step 5: Run Your App

npm run dev

I executed the above example code and added the screenshot below.

Open http://localhost:3000, and you’ll see a server-rendered list of states and a client-side filter to search through them.

When to Use React Server Components

From my experience, use Server Components when:

• You want to improve load performance by reducing client-side JavaScript.
• Your component primarily fetches and displays data without user interaction.
• You want to keep sensitive logic or data fetching on the server.
• SEO is a priority, and you want content indexed immediately.

Use Client Components when:

• Your UI requires user interaction like forms, buttons, or animations.
• You need access to browser APIs like window or document.
• You want to handle client-side state and events.

Tips and Best Practices

• Mix wisely: Combine Server and Client Components to get the best of both worlds.
• Avoid client-only libraries in Server Components: Since Server Components don’t run in the browser, browser APIs won’t work.
• Leverage streaming: Server Components can stream HTML progressively, improving perceived performance.
• Use Next.js 13 or frameworks that support RSC: They provide the best developer experience.

React Server Components are a powerful addition to the React ecosystem. They let you build faster, more scalable applications by leveraging the server’s power while keeping your client lean and interactive.

If you haven’t tried them yet, I encourage you to experiment with Server Components in your next project. The performance benefits and improved developer experience might surprise you!

Other React articles you may like:

• How to Import CSS Files in React Components
• Optimize React Functional Components with React.memo
• How to Fix React Component Not Defined Error
• How to Pass Ref to Child Component in React

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/