React Server Components: What Actually Changes in Your Architecture

Server Components Aren't Just an Optimization Most articles treat React Server Components (RSC) as a performance feature. They're not—they're an architectural shift in where your application logic lives. Understanding this changes how you design everything. The Core Distinction // Server Component — runs on server, never shipped to browser // app/users/page.tsx async function UsersPage() { // Direct DB access — no API needed const users = await db.users.findMany({ where: { active: true }, orderBy: { createdAt: 'desc' }, }); return ( <div> {users.map(user => ( <UserCard key={user.id} user={user} /> ))} </div> ); } // Client Component — runs in browser, can use hooks and events 'use client'; function UserCard({ user }: { user: User }) { const [expanded, setExpanded] = useState(false); return ( <div onClick={() => setExpanded(!expanded)}> <h3>{user.name}</h3> {expanded && <p>{user.email}</p>} </div> ); } What You Can't Do