The boundary is the point where you transition from a Server Component to a Client Component. It defines the 'edge' of your client-side JavaScript bundle.
Interactive Simulation Engine
The "One-Way Mirror" Gate
Architectural Boundary Rules
Server
Secure & Private
page.tsx
db-secret.ts
Client
Public & Interactive
button.tsx
chart.tsx
Hover over a side or try an 'Illegal Import' to see the boundary rules in action.
Executable Code Workbench
page.tsx
Live Code Editor1// THE COMPOSITION PATTERN (Critical Architect Tip)
2// This is how you render a Server Component INSIDE a Client Component:
3
4// app/client-parent.tsx
5'use client'
6export default function ClientParent({ children }) {
7 return <div>{children}</div>
8}
9
10// app/page.tsx (Server)
11import ClientParent from './client-parent'
12import ServerChild from './server-child'
13
14export default function Page() {
15 return (
16 <ClientParent>
17 <ServerChild /> {/* This stays a Server Component! */}
18 </ClientParent>
19 )
20}Mental Model
Think of the boundary as a gate. You can pass data (props) through the gate from Server to Client, but the Client cannot reach back inside the Server to fetch code.
Why This Exists
To keep your client-side bundle lean. By clearly defining where interactivity starts, Next.js knows exactly which code needs to be sent to the browser and which can stay securely on the server.
Critical Note
"You can't have a Server Component inside a Client Component. You CAN, but only if you pass it as 'children' or props. You cannot import a Server Component directly into a 'use client' file."