composition decision

컴포넌트의 위치는 데이터와 이벤트가 결정한다

서버 컴포넌트와 클라이언트 컴포넌트는 경쟁 관계가 아니라 역할 분담입니다. 데이터 준비는 서버에서 끝내고, 반응이 필요한 UI만 클라이언트로 옮깁니다.

서버에 두는 영역

default first

초기 데이터

사용자, 상품, 권한, 캐시 정책은 서버에서 준비합니다.

정적 마크업

설명, 목록, 레이아웃처럼 이벤트가 없는 UI는 번들에서 제외합니다.

민감 로직

API 키와 내부 DB 접근은 브라우저 코드로 전달하지 않습니다.

leaf island

입력과 클릭

버튼, 폼, 드롭다운처럼 이벤트 핸들러가 필요한 조각입니다.

로컬 상태

토글, 편집 모드, 임시 입력값은 클라이언트 상태로 관리합니다.

브라우저 API

storage, media, 위치 정보처럼 브라우저 환경이 필요한 코드입니다.

data

첫 화면에 필요한 데이터는 page나 layout에서 먼저 채웁니다.

props

함수, Date, Map 대신 문자열, 숫자, 배열, 객체로 넘깁니다.

leaf

전체 페이지보다 버튼과 위젯 단위로 경계를 좁힙니다.

children

클라이언트 래퍼가 서버 결과를 children으로 받을 수 있습니다.