server component boundary

서버에서 끝낼 일과 브라우저로 넘길 일을 분리한다

서버 컴포넌트는 데이터 접근과 렌더링 준비를 맡고, 클라이언트 컴포넌트는 상태와 이벤트가 필요한 작은 섬으로 남기는 것이 기본 전략입니다.

서버에 남기는 작업

zero bundle
1
데이터 접근

DB, 파일 시스템, 내부 API 호출은 브라우저 번들에 포함되지 않습니다.

2
민감 정보 보호

API 키, 토큰, 서버 전용 로직을 클라이언트 코드로 보내지 않습니다.

3
HTML 준비

데이터가 채워진 초기 UI를 만들고 스트리밍 가능한 단위로 보냅니다.

브라우저로 넘기는 작업

client island
A
사용자 이벤트

onClick, 입력 처리, 키보드 이벤트는 클라이언트 컴포넌트가 맡습니다.

B
로컬 상태

useState, useEffect, 브라우저 API는 "use client" 아래에 둡니다.

C
하이드레이션

서버 HTML 위에 필요한 작은 상호작용만 연결합니다.

요청에서 인터랙션까지

Server render

서버 컴포넌트 실행과 데이터 조회가 먼저 일어납니다.

HTML

초기 화면은 JavaScript 실행 전에도 표시될 수 있습니다.

RSC Payload

클라이언트 경계와 props 참조가 직렬화되어 전달됩니다.

Hydration

필요한 클라이언트 번들이 로드되어 이벤트가 연결됩니다.