Next.js & React Query로 SSR 성능 최적화: Waterfall 현상 해결 방법
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

처음부터 다 보여줄 필요는 없잖아?

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Next.js 및 React Query를 사용하는 웹 개발자, SSR 환경에서 성능 최적화를 고려하는 개발자

난이도: 중간 (React Query와 Suspense 개념 이해 필요)

핵심 요약

  • Next.js + React Query 환경에서 SSR 성능 저하의 주요 원인은 '폭포수(Waterfall) 현상'
  • useSuspenseQueries 사용으로 병렬 API 호출을 통해 초기 렌더링 시간 단축 가능
  • Streaming SSR 활용으로 '모든 데이터가 준비될 때까지 기다리지 않도록' UI 조각 단위로 전송

섹션별 세부 요약

1. SSR의 문제점과 `useSuspenseQuery`의 한계

  • useSuspenseQuery를 여러 개 사용할 경우, API 호출이 순차적으로 일어나며 초기 렌더링 시간이 늘어남
  • React의 Suspense 동작 원리로 인해 각 쿼리마다 컴포넌트가 다시 렌더링되며 폭포수 현상 발생
  • 총 로딩 시간은 가장 오래 걸리는 단일 API 호출 시간에 비례

2. `useSuspenseQueries`로 병렬 fetching 개선

  • useSuspenseQueries를 사용하면 모든 쿼리를 병렬로 실행 가능
  • 한 번의 Suspend로 초기 렌더링 시간이 크게 단축됨
  • 모든 API 호출이 병렬로 이루어져 총 로딩 시간은 가장 오래 걸리는 API의 시간과 비슷해짐

3. Streaming SSR을 통한 UI 조각 전송

  • Streaming SSR은 HTML을 청크 단위로 브라우저에 순차적으로 전송
  • 데이터가 준비되기 전까지 Skeleton UI 또는 fallback UI를 제공하여 사용자에게 일부 UI를 먼저 보여줌
  • FCP(First Contentful Paint) 시간이 0.8초에서 0.3초로 62.5% 개선됨

결론

  • '폭포수 현상'을 해결하기 위해 useSuspenseQueries를 사용하고, Streaming SSR을 통해 UI 조각 단위로 데이터를 전송
  • Streaming SSR은 사용자가 전체 데이터가 준비될 때까지 기다리지 않도록 하여 UX 개선 효과
  • Next.js SSR 환경에서 초기 렌더링 속도를 개선하기 위한 핵심 전략