Intermediate LevelReact JS & React 19
What is the difference between React Server Components (RSC) and Client Components in React 19?
❓ Interview Prompt: Compare React Server Components (zero bundle size, execute on server only) vs Client Components (`'use client'`, interactive hooks).
React 19 architecture categorizes components into two distinct environments:
1. React Server Components (RSC - Default):
•
Execute ONLY on the server. Never shipped to the client JavaScript bundle (0 KB bundle footprint!).
•
Direct access to server databases, filesystems, and secret API keys.
•
Cannot use hooks ('useState', 'useEffect') or browser event listeners ('onClick').
2. Client Components (''use client''):
•
Rendered on server (SSR) and hydrated on client.
•
Have access to interactive state ('useState'), effects, and DOM event listeners.
Code Implementation Example
jsx
// Server Component (Default in Next.js App Router / React 19)
import db from '@/lib/db';
export async function UserList() {
const users = await db.users.findMany(); // Direct database query!
return (
<ul>
{users.map(u => <li key={u.id}>{u.name}</li>)}
</ul>
);
}💡Direct database querying inside React Server Components.
🎯 Interview Key Takeaway
React Server Components run only on the server with 0 KB client bundle size, while Client Components ('use client') handle interactivity.
#RSC#Server Components#React 19#Intermediate
Back to all React JS & React 19 Questions→