프론트엔드
Next.js App Router에서 prefetchQuery와 Suspense로 뚜루루뚜루 데이터 스트리밍하기
두줄요약
Next.js App Router에서 React Query v5.40.0과 Suspense로 데이터 로딩 전략을 비교했습니다. await 없는 prefetch와 점진적 렌더링으로 더 자연스러운 UX를 얻을 수 있음을 실험했습니다.
핵심 내용
- Next.js App Router 마이그레이션 과정에서 React Query 기반 데이터 로딩 전략을 비교
- 기존 선택적 prefetch, 전체 Waterfall, 전체 Parallel 방식의 한계와 SSR 블로킹 문제 정리
- React Query v5.40.0의 await 없는 prefetchQuery와 Suspense 조합으로 Streaming-like UX 구현 가능성 실험
- 여러 API 응답 시간을 기준으로 성능과 로딩 체감을 비교해 초기 화면 개선 효과 확인