React 19 and Server Components

The Shift to Server Components

React Server Components (RSC) run only on the server. They don't ship JavaScript to the client, which reduces bundle size and allows direct access to databases and file systems. They're a key part of React 19 and frameworks like Next.js.

When to Use Server vs Client Components

Use Server Components for: fetching data, accessing backend resources, keeping large dependencies on the server, and static or slowly changing UI. Use Client Components for: event handlers, browser APIs, hooks like useState/useEffect, and third-party client-only libraries.

Data Fetching Patterns

In Server Components you can use async/await directly. No need for useEffect or a data library for the initial load. For client-side updates, combine Server Components with Client Components that call server actions or APIs and revalidate as needed.

async function PostList() {
  const posts = await db.post.findMany();
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

Composition and Interleaving

You can pass Server Components as children to Client Components. The server-rendered output is sent to the client and slotted in. This lets you keep data fetching on the server while adding interactivity only where required.

Migration Tips

Start by identifying components that only display data or static content and convert them to Server Components. Add "use client" only at the boundary where you need interactivity. Gradually move data fetching up into Server Components and pass data as props.