React Server Components

• Server-only: no bundle cost, direct DB/env var access
• Client components: "use client" directive, regular React with hooks
• Serialization: props between server↔client must be JSON-serializable
• Suspense: streaming render boundary (loading.tsx in Next.js)
• Caching: fetch() automatically cached in RSC

// app/posts/page.tsx (Server Component)
async function PostList() {
  const posts = await db.post.findMany(); // direct DB access
  return posts.map(p => <Post key={p.id} {...p} />);
}

// Client component
'use client';
function LikeButton({ postId }) {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(true)}>♥</button>;
}

• Streaming SSR
• Edge Runtime
• Partial Hydration

React Server Components (RSC) are a groundbreaking feature in React that allow components to be rendered on the server, enhancing performance and user experience by reducing client-side JavaScript payloads. By enabling server-side rendering, RSC facilitates faster load times and improved SEO, as content is delivered directly from the server to the client. This approach also allows for seamless integration with APIs and databases, optimizing data fetching and rendering processes.

React Server Components (RSC) are designed to improve the way React applications handle rendering and data fetching. Unlike traditional React components that run exclusively on the client side, RSC allows developers to build components that can be rendered on the server. This shift significantly reduces the amount of JavaScript sent to the client, leading to faster initial load times and a more responsive user interface.

RSC operates on the concept of server-side rendering (SSR), where components are executed on the server before being sent to the client. This means that when a user requests a page, the server processes the React components and returns fully rendered HTML. As a result, users see content almost instantly, which is particularly beneficial for SEO since search engines can easily crawl and index the rendered HTML.

One of the key benefits of RSC is its ability to streamline data fetching. Since the server can directly access databases and APIs, data can be fetched and processed before reaching the client. This reduces the need for additional client-side data fetching, leading to a more efficient application architecture. RSC supports streaming, allowing developers to send parts of a page as they are ready, further enhancing perceived performance.

To implement RSC in a React application, developers can utilize the following command to set up a new project:

npx create-react-app my-app --template cra-template-rsc

This command creates a new React application with the necessary configuration to support Server Components. Once the project is set up, developers can create Server Components by defining them with the export default function syntax and placing them in the app/ directory.

To illustrate how to use React Server Components effectively, let’s consider a scenario where we want to display a list of products from a database. Instead of fetching this data on the client side, we can leverage RSC to handle the data fetching on the server, which enhances performance and reduces client-side load.

First, ensure that your environment is set up for RSC. After creating your React application with the command mentioned previously, you can create a new Server Component as follows:

import React from 'react';
import { fetchProducts } from './api';

export default async function ProductsList() {
    const products = await fetchProducts();
    return (
        

            {products.map(product => (
                
{product.name} - ${product.price}
            ))}
        
    );
}

In this example, the fetchProducts function is responsible for retrieving product data from an API or database. This function is called within the Server Component, ensuring that the data is available before the component is rendered. The async keyword indicates that the function can handle asynchronous operations, allowing for smooth data fetching.

Next, you can integrate the ProductsList component into your application:

import React from 'react';
import ProductsList from './ProductsList';

export default function App() {
    return (
        
            Product Catalog
            
        
    );
}

When a user accesses the application, the ProductsList component will be rendered on the server, fetching the product data and sending the fully rendered list to the client. This approach not only improves the user experience but also enhances SEO by providing search engines with a complete HTML structure.

In conclusion, React Server Components represent a significant advancement in how React applications handle rendering and data fetching. By utilizing RSC, developers can create faster, more efficient applications that provide a better experience for users and improved visibility for search engines.