component boundary
기능 목록보다 실행 위치를 먼저 본다
데이터 위치, 상호작용 필요성, 번들 영향을 같이 보면 서버와 클라이언트 경계를 작게 유지할 수 있습니다.
데이터
어디에서 읽어야 안전하고 빠른가
행동
사용자 입력으로 즉시 바뀌는 부분인가
비용
브라우저에 보내야 하는 JS가 얼마나 늘어나는가
A
Server only
정적 설명, 서버 데이터, 권한 확인, markdown 렌더링처럼 브라우저 이벤트가 없는 영역.
B
Client island
버튼, 입력, 토글, 차트 조작처럼 작은 상호작용이 필요한 영역.
C
Mixed
서버가 데이터와 구조를 만들고 클라이언트가 children 슬롯에서 표시 상태만 바꾼다.
질문
서버 쪽 판단
클라이언트 쪽 판단
데이터가 민감한가
토큰, DB, 권한은 서버에서 처리한다.
브라우저에는 표시 가능한 결과만 전달한다.
즉시 반응해야 하는가
읽기 전용 결과라면 서버 HTML로 충분하다.
입력, 토글, 드래그는 클라이언트 섬으로 둔다.
번들이 커지는가
무거운 계산과 라이브러리는 서버에 남긴다.
상호작용에 필요한 최소 코드만 내려 보낸다.
서버 우선
이유가 없다면 서버 컴포넌트로 시작한다.
섬 최소화
상호작용이 필요한 부분만 경계로 분리한다.
결과 전달
서버 컴포넌트 자체가 아니라 렌더된 결과를 children으로 조합한다.