Next.js App Router에서 React Query v5.40.0의 Streaming-like 데이터 로딩

이 게시물은 Next.js App Router로 마이그레이션하면서 React Query의 새로운 prefetchQuery와 Suspense 기능을 활용해 데이터 스트리밍과 사용자 경험을 개선한 사례를 다룹니다.

기존 방식과 문제점

• Pages Router 시절 선택적 SSR로 인증만 서버에서 미리 로딩
• Waterfall(순차)과 Parallel(병렬) prefetch 방식은 SSR 단계에서 모두 대기하여 초기 렌더링 지연 발생
• 사용자는 빈 화면을 오래 보며 데이터가 조각조각 로딩되는 불편함 경험

React Query v5.40.0의 혁신

• await 없이 prefetchQuery 가능, Suspense와 결합해 점진적 렌더링 지원
• 서버에서 데이터를 완전히 기다리지 않고도 초기 UI를 빠르게 렌더링
• Streaming-like UX로 데이터 도착순 UI 갱신, 자연스러운 사용자 경험 제공

실험 및 결과

• Waterfall, Parallel, No-Await(Streaming-like) 세 가지 접근 방식 비교
• Streaming-like 방식이 초기 렌더링 속도 및 사용자 체감 성능에서 월등한 개선을 보여줌
• FCP, INP, CLS 등 주요 성능 지표가 크게 향상되어 매끄러운 UX 실현

결론

데이터 로딩 전략 하나가 사용자 경험을 크게 바꿀 수 있으며, React Query v5.40.0과 React 18 Suspense의 결합은 SSR 단계에서의 블로킹을 줄이고 자연스러운 스트리밍 데이터 로딩을 가능하게 하여 미래 웹 개발의 새로운 가능성을 열었다고 요약할 수 있습니다.