React Server Components - Intro to RSC

React Server Components (RSC)

React Server Components allow you to render components on the server, reducing the amount of JavaScript sent to the client.

This improves initial page load performance and allows direct access to backend resources (like databases) from your components.

RSC is primarily used with frameworks like Next.js.

Example

// Server Component (runs on server)
async function ProductList() {
  const products = await db.products.findAll();
  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}