Nilupul Perera

Posted on Dec 29

React Server Components (RSC): A Deep Dive with Examples

#webdev #javascript #react

React Server Components (RSC) are a significant evolution in React's architecture, designed to improve performance, developer experience, and user experience in server-rendered applications. This article explores what RSC is, how it differs from Server-Side Rendering (SSR), and the advantages it offers with examples and visual diagrams to enhance understanding.

What Are React Server Components (RSC)?

React Server Components are a feature that allows components to be rendered on the server and sent to the client as a serialized React tree. Unlike traditional client-side rendering, where all components and logic are processed on the client, RSC moves a significant portion of this work to the server, reducing the bundle size and improving performance.

Key Characteristics of RSC

Server-Rendered Components: Components are executed on the server and streamed to the client.
Improved Bundle Size: No need to ship the JavaScript code of server-rendered components to the client.
Seamless Integration: RSC integrates seamlessly with client-side and SSR paradigms.
Zero Waterfall Rendering: Server-rendered content minimizes round-trips for data fetching.

How Does RSC Differ from SSR?

Feature	SSR (Server-Side Rendering)	RSC (React Server Components)
Execution Environment	Both server and client handle logic and rendering.	Only the server renders specified components.
Bundle Size	Ships JavaScript for rendering logic to the client.	Does not ship server component logic to the client.
Interactivity	Requires hydration for interactivity on the client.	Combines server-rendered components with client-side interactivity.
Performance	Full page rendering on the server.	Streams component-level updates for faster rendering.

Advantages of RSC Over SSR

Reduced Client Workload:
- RSC minimizes the amount of JavaScript sent to the client, improving performance.
Better Code Splitting:
- Components can be split between server and client, reducing unnecessary data transfer.
Improved Time-to-Interactive:
- RSC allows critical content to load faster since server components do not require hydration.

How RSC Works

Step 1: Server Rendering

Components designated as server components execute on the server, fetching data and generating the React tree.

Step 2: Streaming to the Client

The server streams serialized React components to the client, where they integrate with existing client-side React components.

Step 3: Client Rendering

Interactive client components hydrate and take over as needed.

Code Example: RSC vs. SSR

RSC Implementation

// ServerComponent.server.js
export default function ServerComponent() {
  const data = fetchDataFromDatabase(); // Server-only logic
  return <div>Data from server: {data}</div>;
}

// ClientComponent.client.js
export default function ClientComponent() {
  return <button onClick={() => alert('Clicked!')}>Click Me</button>;
}

// App.js
import ServerComponent from './ServerComponent.server';
import ClientComponent from './ClientComponent.client';

export default function App() {
  return (
    <div>
      <ServerComponent />
      <ClientComponent />
    </div>
  );
}

In this example, ServerComponent handles server logic, while ClientComponent remains interactive on the client.

SSR Implementation

export default function SSRComponent({ data }) {
  return (
    <div>
      <div>Data: {data}</div>
      <button onClick={() => alert('Clicked!')}>Click Me</button>
    </div>
  );
}

// Server-side Rendering
const serverData = fetchDataFromDatabase();
const html = renderToString(<SSRComponent data={serverData} />);

In SSR, all rendering logic, including interactive components, must be handled during the server-side render.

Performance Comparison Diagram

Here’s a simplified diagram comparing RSC and SSR:

RSC Workflow:

Server processes server components and streams results.
Client processes only interactive components.

SSR Workflow:

Server generates the entire HTML and JavaScript for the page.
Client hydrates the entire page for interactivity.

Rendering Optimization in RSC

React Server Components leverage streaming to render content progressively. This ensures that the most critical content is painted immediately, while less critical parts stream in as they are ready.

How RSC Speeds Up Rendering

Server components are pre-fetched and streamed directly.
Client-side interactivity loads separately, avoiding the need for full-page hydration.
The reduced bundle size improves time-to-interactive for users.

Conclusion

React Server Components offer a revolutionary approach to optimizing performance in React applications. By offloading rendering logic to the server, reducing client-side bundles, and leveraging streaming, RSC enhances both developer and user experience.

If you’re looking to scale your React applications efficiently while improving performance, exploring RSC is a must.

What are your thoughts on RSC? Let me know in the comments below! 🚀

DEV Community