Server Components Basics in React
From the React Design Patterns cheat sheet · Server Components · verified Jul 2026
Server Components Basics
Async components that run on the server with direct data access
jsx
// app/posts/page.tsx - Server Component (default)
async function PostsPage() {
const posts = await db.post.findMany();
return (
<ul>
{posts.map(p => <li key={p.id}>{p.title}</li>)}
</ul>
);
}💡 Server Components are async, run only on the server, and never ship JS to the browser
⚡ Pass Server Components as children to Client Components - best of both worlds
📌 Props from Server → Client must be serializable: no functions, classes, or Dates
🟢 Default to Server Components and opt into Client Components only when you need interactivity
rscserver-componentsreact-19