사용자가 페이지 로딩을 눈치채지 못하게 만들기 — RSC 도입 이야기

문제 상황

• 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, 메모리, 응답 시간 모니터링 기반의 점진적 확장 필요