Composition pattern

서버는 구조를, 클라이언트는 섬을 맡는다

서버 컴포넌트는 데이터와 레이아웃을 준비하고, 클라이언트 컴포넌트는 필요한 작은 상호작용만 이어받습니다.

01

서버 셸

라우트, 데이터 페칭, 권한 확인, 정적 텍스트는 서버 쪽 구조로 먼저 배치합니다.

02

클라이언트 섬

토글, 입력, 애니메이션처럼 상태와 이벤트가 필요한 부분만 클라이언트로 둡니다.

03

children 슬롯

서버에서 렌더된 결과를 클라이언트 래퍼의 children으로 넘겨 실행 경계를 보존합니다.

1

fetch server

데이터 읽기는 가능한 한 서버에서 끝냅니다.

2

pass props

클라이언트에는 필요한 직렬화 값만 전달합니다.

3

interactive leaf

이벤트가 있는 잎사귀 컴포넌트만 클라이언트로 표시합니다.

4

compose

children 패턴으로 서버 결과를 클라이언트 UI 안에 배치합니다.