Interleaving Server and Client Components
Client Modal 안에 Server Cart를 children 슬롯으로 넣는 실전 패턴입니다. 상태 토글은 클라이언트, 데이터 UI는 서버가 담당합니다.
파일 구조
interleaving-server-and-client-components/
├── page.tsx
└── demo/
├── page.tsx
└── ui/
├── modal.tsx ← Client
└── cart.tsx ← Server핵심 파일 코드
import Modal from './ui/modal'
import Cart from './ui/cart'
export default function Page() {
return (
<Modal>
<Cart />
</Modal>
)
}