서버/클라이언트 조합

서버 부모를 기준으로 둔다

라우트 데이터와 비밀 접근은 서버 부모에서 끝내고 화면 데이터만 client child에 넘긴다.

상호작용 단위를 작게 자른다

좋아요 버튼, 필터 패널, modal trigger처럼 브라우저가 필요한 부분만 분리한다.

children 패턴을 활용한다

client shell이 상태를 관리하더라도 내부의 정적 콘텐츠는 server children으로 받을 수 있다.

Server -> Client

직렬화 props plain object, string, number 같은 값 중심으로 넘긴다.

class instance와 function은 조심한다.

Client shell

상태 컨테이너 탭이나 modal 상태를 들고 children을 표시할 수 있다.

children 내용은 서버에서 만들어질 수 있다.

Action

서버 변경 함수 폼 제출이나 mutation을 서버 action으로 연결할 수 있다.

권한 검사를 서버에서 반복한다.

경계 누수

서버 코드 유출 client child가 import하는 순간 서버 전용 모듈이 문제가 된다.

import 방향을 검토한다.

데이터 위치 · props · slot 점검

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

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

slot client shell이 꼭 client여야 하지만 내부 콘텐츠는 서버로 유지할 수 있는가.

조합 패턴

// Server
<Tabs defaultTab="info">
  <ProductSpecs specs={specs
        overflow-wrap: break-word;
        word-break: keep-all;
      } />
</Tabs>
// Tabs만 client component