Getting Started with React Server Components
A deep dive into React Server Components and how they change the way we build modern React applications.
Introduction
React Server Components (RSC) represent a paradigm shift in how we think about rendering in React. Instead of shipping all your JavaScript to the client, you can now keep component logic on the server.
What Are Server Components?
Server Components run exclusively on the server and never ship their JavaScript bundle to the client. This means you can:
- Access databases directly without an API layer
- Keep sensitive logic on the server
- Reduce client-side JavaScript significantly
A Simple Example
Here's how you'd fetch data in a Server Component:
| 1 | // app/posts/page.tsx |
| 2 | async function PostsPage() { |
| 3 | const posts = await db.query('SELECT * FROM posts ORDER BY created_at DESC'); |
| 4 | |
| 5 | return ( |
| 6 | <div> |
| 7 | {posts.map((post) => ( |
| 8 | <PostCard key={post.id} post={post} /> |
| 9 | ))} |
| 10 | </div> |
| 11 | ); |
| 12 | } |
| 13 | |
| 14 | export default PostsPage; |
Notice how we query the database directly — no useEffect, no API routes, no loading states.
When to Use Each
Use Server Components for data fetching, heavy computation, and static UI.
Use Client Components for event handlers, browser APIs, and state.
That's the core of React Server Components. Start small — convert one data-fetching component at a time.