Server ComponentsBeginner
1Question 1 of 1
typescriptWhat is the difference between React Server Components (RSC) and Client Components in Next.js?
Explanation & Concept
By default, all components in the Next.js App Router are **React Server Components (RSC)**.
• Server Components: Render exclusively on the server. They have direct access to backend resources (databases, secrets, file system), send zero JavaScript bundle bytes to the client, and cannot use state, effects, or browser APIs. • Client Components (marked with `'use client'`): Render on the server into HTML, then hydrate on the client. They support interactivity, `useState`, `useEffect`, and browser event handlers.
Code Example
typescript
// app/users/page.tsx (Server Component by default)
import db from "@/lib/db";
import { UserCard } from "./UserCard"; // Client component
export default async function UsersPage() {
// Direct database query on server - zero client bundle weight!
const users = await db.query("SELECT * FROM users LIMIT 10");
return (
<div>
<h1>User Directory</h1>
{users.map((u) => (
<UserCard key={u.id} user={u} />
))}
</div>
);
}How It Works & Key Takeaways
Server Components keep heavy backend libraries and database logic off the client device, resulting in significantly faster mobile load times.
Mock Test · 1 Questions · Optional
Ready for Data Fetching & Caching?
Take a quick test to evaluate yourself, or move straight to the next module.
Beginner1 questions