React Server Components (RSC) - The Future of Full Stack React

React has come a long way since its early days of simple component rendering. With the rise of server side rendering (SSR), static site generation (SSG), and hybrid frameworks like Next.js and Remix, React has gradually embraced full stack capabilities.

With React Server Components (RSC), we are witnessing the next big evolution in how we build fast, scalable, and maintainable web applications. We will look though what RSCs are, why they matter, and how you can start using them today with practical examples.

What are React Server Components (RSC)?

React Server Components are a new type of component that renders on the server by default instead of on the client. The key idea is:

• Some components don't need to run in the browser.

• By rendering them on the server, we can save on JavaScript bundle size, improve performance, and reduce client-side computation.

With RSC, you can:

Render components on the server only (never send their code to the client).

Stream content progressively to the client (faster perceived load).

Keep your business logic or sensitive code hidden from the browser.

Why Should You Care?

1. Performance Boost: Less JavaScript on the client = faster load times.

2. Security: Sensitive operations (database queries, secrets) remain server side.

3. Developer Experience: Write full stack UI logic in React without mixing in other layers.

To define a Server Component in Next.js (as of Next.js 13+):

// app/products/ProductList.jsx

export default async function ProductList() {
  const products = await fetch('https://fakestoreapi.com/products').then(res => res.json());

  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.title}</li>
      ))}
    </ul>
  );
}

This component runs only on the server. It can use async/await freely. It doesn't bloat the client side JS bundle.

Example: Building a Product Page with RSC

Directory Structure (Next.js 13+ App Router)

/app
├── layout.js
├── page.js
└── products
    └── ProductList.jsx

/app/products/ProductList.jsx (Server Component)

export default async function ProductList() {
  const products = await fetch('https://fakestoreapi.com/products').then(res => res.json());

  return (
    <div>
      <h2>Products</h2>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.title}</li>
        ))}
      </ul>
    </div>
  );
}

/app/page.js

import ProductList from './products/ProductList';

export default function HomePage() {
  return (
    <main>
      <h1>Welcome to Our Store</h1>
      <ProductList />
    </main>
  );
}

The page loads fast because ProductList is rendered on the server. No extra JavaScript for the product list on the client.

Progressive Enhancement with Client Components

What if you want to make the product list interactive (e.g., filtering, sorting)?

1. Mark the component as a Client Component using 'use client'.

// app/products/ProductListInteractive.jsx
'use client';

import { useState, useEffect } from 'react';

export default function ProductListInteractive() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch('https://fakestoreapi.com/products')
      .then(res => res.json())
      .then(setProducts);
  }, []);

  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.title}</li>
      ))}
    </ul>
  );
}

2. Import it in your page as usual.

Now it's interactive. But it runs fully on the client.

Common Mistakes to Avoid

1. Using useState or useEffect in Server Components - won't work.

2. Accessing window or document in Server Components - no browser!

3. Fetching data twice - if a Server Component fetches data, the Client Component doesn't need to fetch it again.

Should You Migrate Everything to RSC?

No. RSC is one tool in the toolbox.

• Use RSC for performance and server side data handling.

• Use Client Components where necessary.

For most apps I would use a hybrid approach for the sweet spot.

React Server Components offer a powerful new way to build fast, efficient, and scalable web applications by pushing more work to the server and reducing the client’s JavaScript burden. They are not a silver bullet but can significantly improve your app's performance and maintainability when used wisely.

Next time you build a React app, consider:

• Does this component really need to run in the browser?

• Can this data fetching be done on the server?

With the right balance, RSC can take your React applications to the next level.