Next.js App Router에서 prefetchQuery와 Suspense로 뚜루루뚜루 데이터 스트리밍하기

js App Router 환경에서 React Query의 prefetchQuery와 Suspense를 활용하여 데이터 스트리밍을 구현하는 경험을 공유합니다. 기존 Pages Router에서 App Router로 마이그레이션하는 과정에서 Server Components, React 18의 Concurrent Features, 개선된 개발 경험을 목표로 했으나, SSR과 클라이언트 데이터 로딩이 겹치면서 발생하는 UX 문제를 마주했습니다.

0의 변화를 바탕으로 세 가지 접근 방식을 실험하고, v5 스트리밍 적용 및 성능 비교 결과를 제시합니다. 이를 통해 데이터 로딩 및 렌더링 최적화에 대한 인사이트를 얻을 수 있습니다.

렌더링 최적화에 대한 인사이트를 얻을 수 있습니다.