Server Components Interview Questions
With Answers & Code Examples

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

Hydration is the process of React attaching event listeners and state to server-rendered HTML. React "expects" the client render to produce identical HTML to what the server sent.

Common causes of hydration mismatch:

// ❌ Browser-only APIs in render
function Component() {
  return 
{window.innerWidth}
; // window doesn't exist on server!
}

// ❌ Rendering different content for logged-in users
function Greeting() {
  return 
Hello {localStorage.getItem('name')}
; // localStorage = server-undefined
}

// ❌ Time/random values
function Card() {
  return 
Generated at: {new Date().toISOString()}
; // different each render
}
function Avatar() {
  return ; // different random
}

Fixes:

// ✅ useEffect for browser-only values (runs client-side only)
function Component() {
  const [width, setWidth] = useState(0);
  useEffect(() => { setWidth(window.innerWidth); }, []);
  return 
{width}
;
}

// ✅ suppressHydrationWarning for expected mismatches (timestamps)
{new Date().toISOString()}