Understanding React Server Components

Published on 2023-11-01

React Server Components

React Server Components (RSC) allow you to write UI that can be rendered and optionally cached on the server. In Next.js, the rendering work is further split by route segments to enable streaming and partial rendering.

Key Benefits

Zero Bundle Size: Server Components dependencies are not sent to the client.
Direct Backend Access: Access your database directly from your components.
Automatic Code Splitting: Server Components allow you to split your code automatically.

Example

Source Code

async function getData() {
  const res = await fetch('https://api.example.com/...');
  return res.json();
}

export default async function Page() {
  const data = await getData();
  return <main>{/* ... */}</main>;
}