Back to articles

React Server Components: The Future of Web Apps?

Majd Muhtaseb09/09/20257 minutes

Introduction

React Server Components (RSCs) are a new paradigm in React development that promises improved performance, simplified data fetching, and enhanced security. Unlike traditional client-side React components, RSCs execute on the server during the initial render. This allows for fetching data directly from the database, accessing server-side resources, and shipping less JavaScript to the client.

What are React Server Components?

RSCs are React components that run on the server. They can fetch data, access server-side resources, and then render HTML directly into the initial server response. This HTML is then streamed to the client, where it's hydrated along with client-side components. The key benefit is reduced client-side JavaScript, resulting in faster initial load times and improved user experience.

Benefits of React Server Components

• Improved Performance: Less JavaScript to download, parse, and execute on the client.
• Simplified Data Fetching: Directly access databases and APIs from the server component.
• Enhanced Security: Sensitive data and logic remain on the server.
• SEO Optimization: Server-rendered content is readily indexable by search engines.

Example

Let's consider a simple example of a component that fetches blog posts from a database:

// Server Component (PostList.js)
import { db } from './db'; // Assumed database connection

async function getPosts() {
  // Simulate database fetch
  await new Promise(resolve => setTimeout(resolve, 500));
  return db.posts.findAll();
}

export default async function PostList() {
  const posts = await getPosts();

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

//Dummy db
export const db = {
 posts: {
  findAll: async () => {
   return ([{id: 1, title: "First Post"}, {id:2, title: "Second Post"}])
  }
 }
}

In this example, PostList is a Server Component. It directly fetches data from a hypothetical db.posts object. The fetched posts are then rendered into an HTML list. This HTML is sent to the client, and only the minimal JavaScript required for interactivity is shipped.

Client Components

It's important to understand that RSCs work in conjunction with Client Components. Client Components are your standard React components that run in the browser and handle user interactions, state management, and other client-side logic. They are denoted using the "use client" directive at the top of the file.

// Client Component (Button.js)
"use client";

import { useState } from 'react';

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

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

Combining Server and Client Components

You can nest Client Components within Server Components and vice versa. This allows you to build complex UIs where data fetching and initial rendering are handled on the server, while interactive elements are managed on the client.

// Server Component (ParentComponent.js)
import Button from './Button'; // Client Component

export default function ParentComponent() {
  return (
    <div>
      <h1>My Page</h1>
      <p>This content is rendered on the server.</p>
      <Button />
    </div>
  );
}

Conclusion

React Server Components offer a compelling approach to building modern web applications. By shifting some rendering logic to the server, you can achieve significant performance gains, simplified data fetching, and enhanced security. As the React ecosystem continues to evolve, RSCs are likely to play an increasingly important role in shaping the future of web development.