사용자가 페이지 로딩을 눈치채지 못하게 만들기 — RSC 도입 이야기
2
AI 요약
이 글은 AI가 원문을 분석하여 핵심 내용을 요약한 것입니다.
이 게시물은 RSC와 TanStack Query를 활용해 이벤트 상세 페이지의 LCP를 약 38% 개선한 경험을 공유합니다.
도입 배경
- CSR에서 데이터 페칭 시 초기 white screen과 레이아웃 시프트 발생
- useQuery 등 클라이언트 훅으로 SSR 시 데이터 부재로 isLoading 노출 문제
해결 방식
- RSC의 스트리밍 SSR로 컴포넌트 단위 점진적 렌더링과 FCP 개선
- TanStack Query로 서버에서 쿼리 캐시를 dehydrate해 클라이언트에서 rehydrate로 즉시 사용
- prefetch와 Promise.all 병렬 호출로 서버 응답 시간 단축
결과 및 고려사항
- LCP 약 7.7초 → 4.8초로 약 38% 개선
- RSC는 서버 리소스 증가로 모든 페이지 적용보다는 트래픽·영향도 기반 선택적 적용 권장
