ReactNext.jsServer Components
Understanding React Server Components
A complete guide to React Server Components and the new mental model for React.
6 min read
Understanding React Server Components
React Server Components (RSC) represent a paradigm shift in how we build React applications.
The Core Concept
Server Components run only on the server:
- Zero client-side JavaScript
- Direct database access
- Automatic code splitting
Server vs Client
// Server Component (default)
async function ArticleList() {
const articles = await db.articles.findMany();
return (
<ul>
{articles.map(a => <li key={a.id}>{a.title}</li>)}
</ul>
);
}
// Client Component
'use client';
function LikeButton({ id }) {
const [liked, setLiked] = useState(false);
return (
<button onClick={() => setLiked(!liked)}>
{liked ? '❤️' : '🤍'}
</button>
);
}
Composition Patterns
// Server Component with Client island
function Article({ article }) {
return (
<article>
<h1>{article.title}</h1>
<p>{article.content}</p>
{/* Client island */}
<LikeButton id={article.id} />
</article>
);
}
Benefits
- Smaller bundles - Server-only code doesn't ship
- Better SEO - Full HTML on first paint
- Simpler data fetching - No useEffect waterfall
Embrace the new model - it's the future of React!