Next · Composition

서버-클라이언트 조합 설계도

한 화면을 서버 영역, 클라이언트 섬, children 슬롯으로 나누면 데이터 보안과 상호작용을 동시에 관리할 수 있습니다.

화면 배치 흐름

route tree

Route page 서버 영역

인증, DB 조회, 초기 대시보드 데이터 페칭을 서버에서 처리합니다.

Client island

차트 필터, 프로필 편집, 모달처럼 사용자 입력이 있는 부분만 분리합니다.

Serializable props

서버에서 계산한 숫자, 문자열, 배열을 클라이언트 초기값으로 전달합니다.

Children slot

클라이언트 wrapper가 서버 콘텐츠를 슬롯으로 받아 표시 여부만 제어합니다.

데이터 보안 민감한 로직은 서버에 남깁니다.
상호작용 상태 변화가 있으면 작은 섬으로 분리합니다.
캐시 초기 데이터는 서버 캐시 정책을 따릅니다.
배포 확인 번들 크기와 하이드레이션 경고를 점검합니다.
조합 원칙

화면 전체를 클라이언트로 올리기보다 서버가 기본 뼈대와 데이터를 맡고, 필요한 섬만 하이드레이션하는 구조가 App Router의 성능 모델과 잘 맞습니다.