Component Boundaries

Definition

The strict rules governing how Server Components and Client Components can interact and be nested within each other.

Explain Like I'm New

Rule 1: Server Components can import Client Components. Rule 2: Client Components CANNOT import Server Components. Once you are on the Client, you cannot magically go back to the Server. (However, you CAN pass a Server Component as a `children` prop into a Client Component).

Real World Example

You have a Client Component `<CollapsibleSidebar>` that manages `isOpen` state. You want to put a Server Component `<DatabaseUserList>` inside it. You cannot import it directly. You must pass it as a `children` prop from a higher-level Server page.

Common Use Cases

•Advanced Layout Architecture
•Interleaving server and client code

Interactive Example

/* ❌ ILLEGAL: Client Component importing a Server Component */
// ClientWrapper.tsx
'use client';
import ServerChild from './ServerChild'; // ERROR! Cannot do this.


/* ✅ LEGAL: Using Composition (The "Hole" pattern) */
// ClientWrapper.tsx
'use client';
export default function ClientWrapper({ children }) {
  const [isOpen, setIsOpen] = useState(false);
  return <div onClick={() => setIsOpen(true)}>{isOpen && children}</div>;
}

// page.tsx (Server Component)
import ClientWrapper from './ClientWrapper';
import ServerChild from './ServerChild'; // Fetches DB data

export default function Page() {
  return (
    // The Server Component orchestrates them together!
    <ClientWrapper>
      <ServerChild /> 
    </ClientWrapper>
  );
}

Interview Questions

basic

Can a Server Component import a Client Component?

intermediate

If a Client Component cannot import a Server Component, how do you put Server-rendered content inside a Client-side wrapper?

Flash Cards

Question

Server import Client?

Click to reveal answer

Answer

Yes! This is the standard pattern. The Server builds the page, and drops the interactive Client Components into the 'holes' it leaves.

Question

How to nest them?

Click to reveal answer

Answer

Using the React `children` prop pattern (Composition). The Client Component accepts `children`. The parent Server Component imports BOTH of them, and passes the Server child into the Client wrapper.