React Server Components: A Deep Dive

React Server Components (RSC) represent a significant shift in how we build React applications. By offloading rendering to the server, we can reduce bundle size and improve performance.

Basic Server Component Example

Here is a simple example of a Server Component that fetches data directly from a database:

async function BlogList() {
  const posts = await db.posts.findMany();
  
  return (
    

      {posts.map(post => (
        
{post.title}
      ))}
    
  );
}

Notice how we use async/await directly in the component. This is only possible in Server Components.

Client Components still have their place

If you need interactivity, like state or effects, you still use Client Components:

"use client";

import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);
  
  return (
     setCount(count + 1)}>
      Count is {count}
    
  );
}