프론트엔드
React 18: 리액트 서버 컴포넌트 준비하기
두줄요약
React Server Components가 데이터 요청 waterfall과 번들 크기를 줄이는 방식을 설명했습니다. SSR과의 차이, 컴포넌트 분류 및 제약 조건도 정리했습니다.
구조와 흐름
- 클라이언트 컴포넌트의 렌더링 후 데이터 요청과 중첩 요청 지연으로 발생하는 client-server waterfall
- 서버 컴포넌트의 서버 렌더링·server-to-server 데이터 접근으로 클라이언트 요청 지연 완화
- 서버·클라이언트·공유 컴포넌트 분리와 역할별 제약 조건
선택 이유
- 데이터베이스·파일 시스템·내부 서비스 등 server-only 리소스 직접 접근
- 서버 컴포넌트 코드와 의존 라이브러리의 클라이언트 번들 제외
- 서버에서 선택한 클라이언트 컴포넌트 기반 자동 code splitting과 조기 번들 다운로드
트레이드오프
- 서버 컴포넌트의 state·effect·브라우저 API·사용자 인터랙션 미지원
- 클라이언트 컴포넌트 props의 JSON 직렬화 가능 데이터 제한과 함수 전달 불가
- 중첩 서버 컴포넌트 간 다수 API 요청의 network waterfall 가능성
주의할 점
- RSC는 SSR 대체재가 아닌 상호 보완 수단
- SSR의 초기 HTML 제공과 RSC의 번들 축소를 결합한 초기 사용자 경험 개선
- 글 작성 시점 기준 실험적 기능과 프레임워크 협업 기반 도입 단계
