React 19 (15): Server Components Concepts
easy⏱ 5 mincoursereact
Server vs Client Components
Server Components (default in Next.js App Router) run on the server only. They can fetch data directly, access secrets, and send minimal HTML. Client Components (marked with 'use client') run in the browser for interactivity. Think of it as: server for data, client for state and events.
// Server Component (default) - runs on server
async function UserList() {
const users = await db.query('SELECT * FROM users');
return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}
// Client Component - runs in browser
'use client';
function LikeButton({ postId }) {
const [liked, setLiked] = useState(false);
return <button onClick={() => setLiked(!liked)}>♥</button>;
}
When to use which?
Use Server Components for: data fetching, accessing backend resources, large dependencies (markdown parsers, etc.), SEO-critical content. Use Client Components for: interactivity (useState, onClick), browser APIs (localStorage, geolocation), real-time updates.
Design the split
Create a mock layout showing how you'd split a blog post page: a ServerPost component (simulated) that 'fetches' post data, and a ClientComments component with useState for new comments. This demonstrates the mental model.