React Server Components (RSCs) execute exclusively on the server (during request or build time). Their code and dependencies are never shipped to the client. This reduces bundle size for faster loads and allows direct backend access. Client Components run in the browser, handle interactivity (useState, useEffect, event handlers), and are marked with the ‘use client’ directive.
| Feature | Server Component | Client Component |
| Runs on | Server | Browser |
| Can use (useState) | ❌ No | ✅ Yes |
| Access backend directly | ✅ Yes | ❌ No |
File Naming Convention (Next.js 13/14):
- .server.jsx for server components
- .client.jsx for client components
Example :
// components/InteractiveButton.jsx
'use client'; // Directive marks this as a Client Component
import { useState } from 'react';
export default function InteractiveButton() { const [count, setCount] = useState(0); return <button onClick={() => setCount(c => c + 1)}>Clicked {count}</button>;}
// A Server Component could import and render <InteractiveButton />
