mixed render
서버가 구조를 만들고 클라이언트는 작은 섬을 맡는다
조합의 핵심은 서버 컴포넌트 결과를 유지하면서 상호작용 경계만 좁게 분리하는 것입니다.
서버 역할
데이터 접근, 권한 확인, 초기 HTML 구조를 준비한다.
클라이언트 역할
토글, 입력, 로컬 상태처럼 즉시 바뀌는 표면만 담당한다.
연결 방식
서버 컴포넌트 자체가 아니라 렌더된 결과를 children으로 조합한다.
01
Data shell
서버에서 데이터와 권한을 확인하고 화면의 큰 골격을 만든다.
02
Client island
사용자 입력을 받는 버튼, form, toggle만 클라이언트 파일로 분리한다.
03
Children slot
클라이언트 wrapper는 서버 결과를 실행하지 않고 표시 위치만 제어한다.
판단 질문
서버에 둔다
클라이언트로 내린다
데이터가 어디에 있는가
DB, token, 권한, 파일 시스템처럼 서버 자원에 가까운 것
브라우저에서 선택한 필터나 임시 입력 값
화면이 언제 바뀌는가
요청 시점에 완성된 HTML이면 충분한 영역
클릭과 입력 직후 즉시 변해야 하는 영역
번들 비용이 커지는가
무거운 계산과 라이브러리는 서버에서 끝낸다
상호작용에 필요한 최소 코드만 보낸다
기본값
서버 컴포넌트로 시작하고 이유가 생길 때만 경계를 연다.
경계 크기
상호작용 섬이 작을수록 hydration 범위와 번들이 줄어든다.
전달 형태
복잡한 객체 대신 직렬화 가능한 data와 children을 넘긴다.