What are React Server Components (RSC) and how do they differ from SSR?

Server Components run ONLY on the server. Their code is never sent to the browser. They can be async, access databases directly, and use server-only secrets.

Key differences from SSR:

• SSR — renders the same client components on the server to generate initial HTML, then ships JS to "hydrate" them. Bundle still goes to client.
• RSC — runs on server, sends a serialized component tree (not HTML) to the client. The component's code is never in the bundle.

// ✅ Server Component — async, DB access, no useState
// app/users/page.tsx (in Next.js App Router)
async function UsersPage() {
  const users = await db.query('SELECT * FROM users'); // direct DB, no API needed
  return ;
}

// ✅ Client Component — interactive, uses hooks
'use client';
function UserList({ users }) {
  const [filter, setFilter] = useState('');
  return (
    <>
       setFilter(e.target.value)} />
      {users.filter(u => u.name.includes(filter)).map(u => 
{u.name}
)}
    
  );
}

// Composing — Server component renders Client component (passes serializable props)
// ❌ Client component CANNOT import Server component
// ✅ Server component can import Client component