RSC 도입 후 LCP 800ms 악화 해결을 통한 Server Waterfall 최적화

React Server Components Don't Make Your App Fast by Default

nosyos2026년 5월 21일6분intermediate

AI 요약

Context

Next.js Pages Router에서 App Router로 마이그레이션하며 RSC를 도입한 환경임. 데이터 페칭 로직이 개별 컴포넌트로 분산되면서 부모-자식 간 순차적 쿼리 실행으로 인한 서버 사이드 병목 현상이 발생함.

Technical Solution

개별 컴포넌트의 데이터 페칭으로 인한 Sequential Waterfall 구조를 분석하여 TTFB 지연 원인 파악
Promise.all을 통한 데이터 페칭 호이스팅으로 여러 독립 쿼리를 Parallel 실행하는 구조로 전환
React.cache 도입을 통해 단일 요청 내 중복 데이터 페칭을 제거하는 Deduplication 전략 적용
use client 지시어를 리프 노드로 밀어내어 Client Bundle 크기 최소화 및 Hydration 비용 제거
PerformanceObserver를 활용한 TTFB와 LCP의 상관관계 추적 및 서버 응답 시간 측정 체계 구축

Impact

부적절한 RSC 데이터 페칭 구조로 인해 Production 환경 LCP 800ms 증가 확인
순차적 쿼리(40ms * N)를 병렬 쿼리(1회 Round Trip)로 최적화하여 TTFB 단축

실천 포인트

- 서버 컴포넌트 내 데이터 페칭 시 부모-자식 간 의존성이 없는 경우 Promise.all로 병렬화할 것 - LCP 저하 시 클라이언트 메트릭보다 서버 응답 시간(TTFB)을 우선적으로 분석할 것 - 동일 요청 내 중복 데이터 접근 시 React.cache를 사용하여 DB Round Trip을 최소화할 것 - RSC의 이점을 극대화하기 위해 인터랙션이 없는 정적 콘텐츠는 서버에 유지하고 Client Component를 최대한 말단으로 배치할 것

태그

#LCP #Data Fetching #TTFB #Waterfall #React Server Components

원문 읽기