피드로 돌아가기
Dev.toFrontend
원문 읽기
RSC 도입을 통한 Client-side Bundle Size 최소화 및 렌더링 모델 최적화
I Stopped Fighting React Server Components — Here's What Finally Made It
AI 요약
Context
기존 SSR 모델의 전체 트리 Hydration으로 인한 불필요한 JavaScript 전송 및 Bundle Size 증가 문제 발생. API 계층이 단순 DB 중계 역할만 수행하며 데이터 페칭 Waterfall 현상이 심화되는 구조적 한계 직면.
Technical Solution
- Server와 Client 환경을 동시에 활용하는 Full-stack Component Model로의 전환
- 'use client' 지시어를 통한 명시적 Boundary 설정을 통한 서버-클라이언트 책임 분리
- Server Components 내 DB 쿼리 직접 수행으로 API Middle Layer 제거 및 네트워크 홉 감소
- RSC Payload 기반의 직렬화된 UI 전달로 Client-side JavaScript 실행 및 Hydration 제거
- 데이터 페칭과 렌더링 로직의 Co-location을 통한 Waterfall 현상 해결
- Markdown Parser 등 무거운 라이브러리를 서버단으로 이전하여 브라우저 전송량 제거
실천 포인트
- UI 구성 요소 중 Interactivity(State, Effect)가 필수적인 부분만 'use client'로 분리했는가? - 무거운 라이브러리(Parser, Formatter)가 Client Bundle에 포함되어 성능을 저하시키지 않는가? - 데이터 페칭 로직이 Client-side Waterfall을 유발하는 구조인지 확인하고 Server Component로 이전 가능한가? - Component Tree 상단에서 하단으로 흐르는 서버-클라이언트 데이터 흐름이 단방향으로 설계되었는가?