Advanced
React Server Components
Server vs client components, streaming, and the mental model.
React Server Components (RSC) render on the server and send a serialised UI description to the client — never shipping their JavaScript. They can read the database or filesystem directly and keep secrets server-side.
Server components are a pre-cooked meal delivered ready to eat (no recipe shipped); client components are the burner you keep at home for the parts that need live cooking.
Key concepts
1
Client components (marked 'use client') handle interactivity — state, effects, event handlers. A typical app is mostly server components with islands of client components, dramatically cutting bundle size.
Client components'use client'
2
Servers stream HTML and RSC payloads so the page becomes interactive progressively; frameworks like Next.js App Router implement this model with async server components and loaders.
streamasync
3
Pitfall: using hooks or browser APIs in a server component (they are not allowed) — those belong in a 'use client' component. Interview angle: "what can a server component NOT do?" — no state, effects, or event handlers; it renders once on the server.
Pitfall:Interview angle:'use client'
jsx
// Server component (default in App Router) — no JS shipped
export default async function Page() {
const posts = await db.posts.findMany(); // direct data access
return <PostList posts={posts} />;
}
// Client island
'use client';
export function LikeButton() { const [n, setN] = useState(0); return <button onClick={() => setN(n+1)}>{n}</button>; }