사용자가 페이지 로딩을 눈치채지 못하게 만들기 — RSC 도입 이야기
프론트엔드
사용자가 페이지 로딩을 눈치채지 못하게 만들기 — RSC 도입 이야기
두줄요약
Next.js App Router에서 RSC와 TanStack Query prefetch를 결합해 이벤트 상세 페이지의 초기 로딩과 레이아웃 시프트를 개선했습니다. LCP는 약 38% 줄었고, 선택적 적용과 서버 부하 모니터링 전략도 함께 정리했습니다.
문제 상황
- Next.js App Router 기반 글로벌 서비스의 이벤트 상세 페이지에서 CSR 중심 렌더링으로 초기 빈 화면과 레이아웃 시프트 발생
- TanStack Query의 useQuery 사용으로 SSR 시점 데이터 부재, 로딩 상태 노출과 FCP, LCP 저하 우려
- SEO와 사용자 경험을 함께 고려한 서버 렌더링 필요성 대두
원인 분석
- 클라이언트 훅 의존으로 서버에서 데이터가 먼저 채워지지 않는 구조
- 이미지, 웹폰트, 동적 콘텐츠, hydration 차이로 레이아웃 시프트가 계속 발생 가능
- 모든 페이지에 동일한 방식 적용 시 서버 부하와 비용 증가 우려
해결 방법
- RSC와 TanStack Query prefetch, dehydrate, HydrationBoundary 조합으로 서버 선패칭 후 클라이언트 캐시 복원
- 여러 API 호출은 Promise.all로 병렬 처리해 서버 응답 시간 단축
- 렌더링 품질 영향이 큰 페이지 중심으로 선택적 적용 전략 수립
성능/운영 포인트
- LCP 약 7.7초에서 4.8초로 개선
- 초기 콘텐츠 즉시 표시로 체감 속도와 UX 향상
- 서버 CPU, 메모리, 응답 시간 모니터링 기반의 점진적 확장 필요