서버 컴포넌트 이해하기

이 아키텍처는 React 애플리케이션의 성능, 보안, 개발 경험을 함께 개선하는 방향을 제시했습니다.

데이터 접근 위치, 번들 크기, 상호작용 필요 여부를 기준으로 서버 컴포넌트 사용 범위를 정리합니다.

서버 컴포넌트 렌더링 경계

1

URL 요청

App Router가 URL과 가장 가까운 page·layout 경계를 선택합니다.

2

서버 실행과 데이터 조회

컴포넌트가 DB·secret·큰 의존성을 서버에 둔 채 UI를 계산합니다.

3

RSC payload와 HTML 스트림

계산 결과만 직렬화해 브라우저가 빠르게 그릴 화면 골격을 보냅니다.

4

Client island 연결

state·event가 필요한 작은 컴포넌트만 JavaScript로 hydrate합니다.