서버/클라이언트 조합

서버는 데이터를 준비하고 클라이언트는 작은 상호작용만 맡는다. 경계가 높아질수록 번들과 보안 비용이 커진다.

Server parentfetch와 권한 검사

Client child이벤트와 local state

Serializable props넘길 수 있는 값만 전달

Slotserver children을 client shell에 끼움

01 서버 부모를 기준으로 둔다 라우트 데이터와 비밀 접근은 서버 부모에서 끝낸다.

02 상호작용 단위를 작게 자른다 좋아요 버튼, 필터 패널, modal trigger만 분리한다.

03 children 패턴을 활용한다 client shell 내부 콘텐츠를 server children으로 유지할 수 있다.

데이터 위치 초기 fetch를 client child로 불필요하게 내리지 않았는가.

props client child로 넘기는 값이 직렬화 가능한가.

slot client shell 안의 콘텐츠를 서버로 유지할 수 있는가.

pattern

// Server
<Tabs defaultTab="info">
  <ProductSpecs specs={specs} />
</Tabs>

// Tabs만 client component