React Server Components: What, Why, and How

Introduction

In the ever-evolving world of web development, performance and developer experiences are at the forefront of every major structure updates. React, one of the most popular libraries for the manufacture of user interfaces, has introduced a powerful concept known as the react server components (RSC). But what are the server components, why should you care, and how can you use them effectively?

Let’s break it all.

What Are React Server Components?

The react server component is a new type of react component that runs only on the server. Unlike the traditional components running on the client (in the browser), they allow you to build parts of your app that are rendered on the server and sent to the client as serialized HTML or React code.

Key Features:

• No bundle size cost at client
• Full access to the backend
• Easy integration with existing customer components
• Improved performance for non-interactive UI parts

Why React Server Components?

Imagine that you have a big e-commerce site. Product listing, filters and detailed descriptions do not necessarily require heavy interaction, but it contains a lot of data fetching and formatting. With traditional response:

• Getting data occurs through client-side or API
• You can eliminate shipping unnecessary JavaScript
• You lose some performance and SEO benefits

With these Components, you can:

• Get direct data from the server (without API)
• Avoid bundling the client unnecessary JavaScrip
• Ship Low Code, Load Time and Performance Improvement

How Do React Server Components Work?

Let’s take a quick look at the way of using server components.

1. Project Setup (with Next.js)

React Server Components are currently best supported with Next.js.

npx create-next-app@latest my-rsc-app --demo-app
cd my-rsc-app

Make sure to use the /app directory and not the traditional /pages directory, as the App Router is where Server Components live.

2. Creating a Server Component

Create a file under the /app directory:

// app/components/ProductList.server.jsx
import db from '@/lib/db';

export default async function ProductList() {
  const products = await db.getProducts(); // Direct DB call
  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

3. Using Client Components

If you need interactivity, you can mix in Client Components.

// app/components/Cart.client.jsx
'use client';

export default function Cart() {
  const [items, setItems] = useState([]);

  return (
    <div>
      <h3>Your Cart</h3>
      <button onClick={() => setItems([...items, 'Product'])}>Add Item</button>
    </div>
  );
}

Then compose them together in your layout or page:

// app/page.jsx
import ProductList from './components/ProductList.server';
import Cart from './components/Cart.client';

export default function Home() {
  return (
    <>
      <ProductList />
      <Cart />
    </>
  );
}

Best Practices

• Use Server Components for heavy data fetching and rendering
• Use Client Components for interactivity
• Avoid overusing Client Components, as they increase your bundle size

Conclusion

These components are not a replacement, but the react component is an extension for the model. They provide a way to shift responsibilities to the server to reduce client-side workload and improve performance. If you are using Next.JS 13+ and want to optimize your application for speed and scalability, then now is the right time to dive into react server components.

Finally, for more such updates and to read more about such topics, please follow our LinkedIn page Frontend Competency