Introduction

React has come a long way since its launch in 2013. What started as a simple component-based library for building dynamic user interfaces has now evolved into a comprehensive framework capable of handling both frontend and backend logic. At the heart of this evolution lies a major shift in how rendering works in React.

From Client Side Rendering (CSR) to Server Side Rendering (SSR) and now to the groundbreaking React Server Components (RSC), each stage reflects a new way of thinking about performance, scalability, and user experience.

In this article, we'll explore these rendering paradigms like where we started, why we evolved, and how React Server Components are reshaping modern web development.

1. The Foundation: Client-Side Rendering (CSR)

Client-Side Rendering is how React was traditionally used in projects like Create React App.

What is CSR?

In CSR, the server sends a nearly empty HTML file to the browser, which then downloads and runs a large JavaScript bundle. Once loaded, React takes over and renders the UI inside the browser.

<!-- index.html -->
<html>
  <head>
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

Pros

Cons

CSR was a great start, but performance and SEO limitations pushed developers toward server-rendered solutions.

2. The Evolution: Server-Side Rendering (SSR)

What is SSR?

Server Side Rendering generates the HTML on the server at request time and sends it to the client. After that, React "hydrates" the HTML to make it interactive.

This is the model used by Next.js by default.

// pages/index.tsx in Next.js
export default function Home({ posts }) {
  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

export async function getServerSideProps() {
  const posts = await fetchPosts();
  return { props: { posts } };
}

Pros

Cons

SSR struck a balance between performance and interactivity, but it still shipped full JS bundles and had hydration costs.

3. Optimization Layer: SSG and ISR

Static Site Generation (SSG)

SSG generates pages at build time instead of at request time.

export async function getStaticProps() {
  const posts = await fetchPosts();
  return { props: { posts } };
}

Incremental Static Regeneration (ISR)

ISR introduced the ability to regenerate individual static pages in the background, blending static performance with dynamic content.

export async function getStaticProps() {
  return {
    props: await fetchData(),
    revalidate: 60 // Regenerate page every 60 seconds
  };
}

These optimizations helped reduce runtime costs but still required hydration and shipped full JS bundles.

4. The Breakthrough: React Server Components (RSC)

What are React Server Components?

React Server Components (RSC) introduce a new type of component that runs only on the server. These components never get shipped to the client , reducing JavaScript bundle size and hydration costs.

# First introduced in 2020, RSC became production-ready with Next.js 13/14 and React 18+.

Key Features

Real Example

/app/products/page.tsx (Server Component)

// This runs ONLY on the server
export default async function ProductsPage() {
  const products = await getProductsFromDB();

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

/components/LikeButton.tsx (Client Component

'use client';
import { useState } from 'react';

export function LikeButton() {
  const [likes, setLikes] = useState(0);
  return <button onClick={() => setLikes(likes + 1)}>👍 {likes}</button>;
}

5. Why This Matters: Performance, DevX, and UX

Performance Gains

Better Developer Experience

Seamless Scalability

React Server Components give developers the tools to create fast, scalable, and maintainable apps without sacrificing interactivity.

6. The Future: Edge + Streaming + AI?

The future of React isn’t purely on the client or the server; it’s hybrid.

With Edge rendering, streamed UI, and selective hydration, modern apps can:

Conclusion

React’s rendering journey from CSR to SSR to RSC mirrors the industry's growing emphasis on performance, SEO, scalability, and developer ergonomics.

With React Server Components, we are no longer just optimizing. We are redefining how modern web apps are built.