React Server Components

서버 결과와 클라이언트 인터랙션은 다른 경로로 온다

서버 컴포넌트는 HTML과 RSC Payload를 만들고, 클라이언트 컴포넌트는 번들과 하이드레이션을 거쳐 이벤트를 담당합니다.

서버에서 끝나는 작업

async 컴포넌트 실행

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

HTML 생성

초기 화면은 JavaScript 실행을 기다리지 않고 먼저 표시될 수 있습니다.

RSC Payload 직렬화

클라이언트 컴포넌트 위치와 props 참조가 전송됩니다.

브라우저에서 이어지는 작업

HTML 표시

사용자는 서버 렌더링 결과를 먼저 봅니다.

클라이언트 번들 로드

"use client" 경계 아래 코드만 인터랙션용 JavaScript로 내려갑니다.

Hydration

버튼 클릭, 입력, 상태 변경 같은 이벤트가 연결됩니다.

Server Component

민감 정보, 데이터 조회, 렌더링 준비를 맡습니다.

Client Component

useState, useEffect, onClick처럼 브라우저 상태와 이벤트를 맡습니다.

경계 설계

상호작용이 필요한 작은 부분만 클라이언트 컴포넌트로 분리하면 번들이 줄어듭니다.