My Server Component Got Corrupted into Client (Next.js Composition Pattern)
내 서버 컴포넌트가 오염됐다 (Next.js Composition 패턴)
I imported a Server Component inside a Client Component, and it broke everything. Here’s how to use the Composition Pattern (Donut Pattern) to fix it and correctly separate Context Providers.
c
codemapo
INTERDISCIPLINARY DEV · SEOUL
9. Conclusion: Assemble on the Server
The core philosophy of Next.js App Router is "Lego Assembly."
Make interactive parts (Buttons, Modals, Dropdowns) Client Components.
Make data-fetching parts (Lists, Details, DB access) Server Components.
Compose them in the outermost Server Page (page.tsx).
Whenever you type import ServerComponent inside a Client Component, STOP.
Ask yourself:
"Can I pass this as a prop (children) instead?"
That single question will make your app 2x faster.