Getting Started with React Server Components (RSC): React 19 and Next.js in Action

3 min readDec 25, 2024

React Server Components (RSC) have emerged as a transformative feature in React 19, allowing developers to build highly performant web applications by offloading component rendering to the server. Whether you’re using React standalone or leveraging a powerful framework like Next.js, RSC offers exciting new possibilities for delivering lightning-fast, data-rich user experiences.

React Server Components (RSC) with streaming support can be used with just React 19 or in conjunction with a framework like Next.js. However, frameworks like Next.js provide better tooling and out-of-the-box support for things like routing, middleware, and rendering pipelines, making it more seamless to work with RSC and streaming.

Below is an example of using RSC without Next.js, directly with React 19, to stream data:

1. Example: Using React 19 RSC and Streaming (Standalone)

Server-Side Code

The server streams React components incrementally using renderToPipeableStream:

// server.js
import express from 'express';
import { renderToPipeableStream } from 'react-dom/server';
import App from './App';

const app = express();

app.get('/', (req, res) => {
  res.setHeader('Content-Type', 'text/html');

  const { pipe } = renderToPipeableStream(<App />, {
    onShellReady() {
      res.statusCode = 200;
      pipe(res); // Start streaming
    },
    onError(err) {
      console.error('Error:', err);
      res.statusCode = 500;
      res.end('Something went wrong.');
    },
  });
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server is running at http://localhost:${PORT}`);
});

React Components

`App` Component (Parent Component):

The main entry point includes both server and client components.

// App.js
import Greeting from './Greeting.server';
import Counter from './Counter.client';

export default function App() {
  return (
    <html>
      <head>
        <title>React Server Components Example</title>
      </head>
      <body>
        <h1>Welcome to React 19 RSC!</h1>
        <Greeting name="John" />
        <Counter />
      </body>
    </html>
  );
}

`Greeting` Component (Server Component):

This component is rendered on the server and streamed to the client.

// Greeting.server.js
export default function Greeting({ name }) {
  return <p>Hello, {name}! This is rendered on the server.</p>;
}

`Counter` Component (Client Component):

This component includes interactivity and runs in the browser.

// Counter.client.js
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Running the App

Install dependencies: npm install react react-dom express
Start the server: node server.js
Open your browser and navigate to http://localhost:3000

2. Using RSC with Next.js

React Server Components and streaming work out of the box in Next.js with the App Router (/app directory). Here’s how you might do the same thing with Next.js:

Example:

File: `app/page.js` (Renders Server and Client Components)

// app/page.js
import Greeting from './components/Greeting';
import Counter from './components/Counter';

export default function Page() {
  return (
    <div>
      <Greeting name="John" />
      <Counter />
    </div>
  );
}

File: `app/components/Greeting.js` (Server Component)

// app/components/Greeting.js
export default function Greeting({ name }) {
  return <p>Hello, {name}! Rendered on the server.</p>;
}

File: `app/components/Counter.js` (Client Component)

'use client';
// app/components/Counter.js
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Steps to Run:

Install Next.js: npx create-next-app@latest
Add the above components and pages in the /app directory.
Start the development server: npm run dev
Navigate to http://localhost:3000

Should You Use React Standalone or Next.js?

React Standalone:

Use When:

You want full control over the rendering pipeline.
You’re integrating React into an existing non-React application.

Considerations:

Requires setting up your own routing, bundling (e.g., Webpack or Vite), and deployment.

Next.js:

Use When:

You want a streamlined development experience with built-in routing, optimizations, and deployment capabilities.
You need features like static generation (SSG), incremental static regeneration (ISR), or serverless API routes.