Composition

서버/클라이언트 조합

서버-클라이언트 경계, 조합 패턴, 시나리오별 선택 기준을 실제 화면 배치 관점으로 정리합니다.

목록 + 필터

서버 목록과 클라이언트 입력

초기 목록은 서버에서 만들고 필터 입력은 클라이언트 컴포넌트가 처리합니다.

상세 + 버튼

서버 상세와 클라이언트 액션

상품 정보는 서버에서 읽고 장바구니 버튼만 클라이언트로 분리합니다.

Provider

필요한 곳에만 배치

전역처럼 보이는 상태도 실제 사용 범위가 좁으면 하위 layout 근처에 둡니다.

조합 원칙

클라이언트 섬을 작게 만들수록 초기 화면이 가벼워진다

상호작용이 필요한 UI만 클라이언트로 보내면 서버 컴포넌트의 데이터 접근성과 클라이언트 UI의 반응성을 함께 얻을 수 있습니다.

설계 순서

분리데이터 조회와 사용자 이벤트를 다른 책임으로 나눕니다.
전달서버 결과를 props로 넘길 수 있는 형태로 정리합니다.
검증불필요한 use client가 상위로 번지지 않았는지 확인합니다.