React Server Components
Key idea:
React Server Components (RSC) — components that render only on the server. They never ship to the client bundle → less JS. Can be async (fetch directly in the component). Next.js 13+ App Router — RSC by default. Paradigm: fetch data next to UI, stream via Suspense, mark client components only where interactivity is needed (use client).
Below: details, example, related terms, FAQ.
Details
- Server-only: no bundle cost, direct DB/env var access
- Client components: "use client" directive, regular React with hooks
- Serialization: props between server↔client must be JSON-serializable
- Suspense: streaming render boundary (loading.tsx in Next.js)
- Caching: fetch() automatically cached in RSC
Example
// app/posts/page.tsx (Server Component)
async function PostList() {
const posts = await db.post.findMany(); // direct DB access
return posts.map(p => <Post key={p.id} {...p} />);
}
// Client component
'use client';
function LikeButton({ postId }) {
const [liked, setLiked] = useState(false);
return <button onClick={() => setLiked(true)}>♥</button>;
}Related Terms
Learn more
Frequently Asked Questions
RSC vs SSR?
Classic SSR: render HTML on server + hydrate whole React client-side. RSC: server components do NOT hydrate, only client ones = less JS.
When to use a client component?
When you need useState, useEffect, onClick, onChange. Everything else — server by default.
Supported by all frameworks?
Next.js 13+ (App Router) — production. Remix — planned. Vanilla React — no (needs bundler + framework).