Next.js SSR 성능 개선: React Query와 Streaming SSR을 활용한 데이터 로딩 최적화

핵심 기술

본 콘텐츠는 Next.js의 SSR 환경에서 React Query의 useSuspenseQuery와 useSuspenseQueries를 활용하여 발생할 수 있는 데이터 로딩 병목 현상(폭포수 현상)을 진단하고, Streaming SSR과 함께 Suspense boundary를 세밀하게 조절하는 기법을 통해 초기 렌더링 속도를 개선하는 방법을 다룹니다.

기술적 세부사항

• 폭포수 현상 발생: 여러 API 호출이 순차적으로 이루어져 초기 로딩 시간이 길어지는 문제점을 useSuspenseQuery 여러 개 사용 시 발생한다고 설명합니다.
• useSuspenseQueries를 이용한 병렬 페칭: 여러 쿼리를 동시에 실행하여 폭포수 현상을 완화하고 초기 로딩 시간을 단축하는 해결책을 제시합니다.
  • 모든 쿼리가 병렬로 시작되며, 컴포넌트는 한 번만 suspend됩니다.
  • 하지만 단일 Suspense boundary 내에서 해결될 경우, 가장 오래 걸리는 쿼리에 대한 대기 시간이 여전히 존재합니다.
• Streaming SSR 도입: 각 데이터 의존적인 컴포넌트에 독립적인 Suspense boundary를 부여하여, 먼저 준비되는 데이터부터 순차적으로 사용자에게 보여주는 방식을 소개합니다.
  • Node.js 스트림을 활용하여 HTML chunk를 순차적으로 전송합니다.
  • 정적 부분 및 빠르게 로드되는 데이터를 먼저 표시하고, 느리게 로드되는 데이터는 fallback UI와 함께 점진적으로 로드합니다.
• 성능 개선 효과: Streaming SSR 적용 시 FCP(First Contentful Paint) 시간을 0.8초에서 0.3초로 약 62.5% 개선한 실제 사례를 공유합니다.

개발 임팩트

• 초기 렌더링 속도 및 사용자 경험(FCP 개선)을 획기적으로 향상시킬 수 있습니다.
• SSR의 이점을 유지하면서도 CSR처럼 유연하게 데이터를 점진적으로 로드하는 방식을 구현할 수 있습니다.
• 데이터 로딩 상태 관리에 대한 깊이 있는 이해를 바탕으로 최적화 전략을 수립할 수 있습니다.

커뮤니티 반응

(본문 내에 직접적인 커뮤니티 반응 언급은 없으나, 제시된 방법론은 개발 커뮤니티에서 널리 인정받는 최신 성능 최적화 기법입니다.)