React Query v5.40.0으로 Next.js App Router에서 SSR과 클라이언트 데이터 로딩 최적화하기

핵심 기술: 본 포스트는 Next.js App Router 환경에서 React Query v5.40.0을 활용하여 SSR과 클라이언트 데이터 로딩을 통합하고 최적화하는 과정에 대한 경험을 공유합니다. 특히 Suspense와의 결합을 통해 'Streaming-like' UX를 구현하는 새로운 가능성을 제시합니다.

기술적 세부사항:

• 기존 방식의 한계: Pages Router에서 SSR과 클라이언트 데이터 로딩이 일관되지 않아 발생하는 UX 문제점 분석.
• Next.js App Router 마이그레이션: Server Components 활용, React 18 Concurrent Features, 개발 경험 개선을 위한 마이그레이션 결정.
• 데이터 페칭 전략 비교:
  • 선택적 Prefetch (기존): 인증 정보만 SSR prefetch, 나머지는 CSR 로딩. 빠른 인증 확인, 서버 부하 분산 장점 있으나, 일관되지 않은 로딩 경험, 데이터 로딩 시작점 지연 문제.
  • Waterfall Prefetch (전체 SSR): 모든 API를 서버에서 순차 prefetch. 느린 초기 렌더링 (0.9초), 서버 블로킹 발생.
  • Promise.all Prefetch (전체 병렬 SSR): 모든 API를 동시에 prefetch. 개선된 로딩 시간 (400ms)이나 여전히 서버 블로킹, 리소스 집중 사용.
• React Query v5.40.0 변화:
  • await 없이 prefetch 가능: 서버에서 pending 상태의 쿼리도 dehydrate 가능, 초기 화면 렌더링 속도 향상.
  • Suspense와 결합한 점진적 렌더링: 데이터 준비 시점에 컴포넌트 자동 렌더링, 초기 화면 후 필요한 데이터 점진적 로딩.
  • Streaming-like UX 구현: 서버에서 페이지 뼈대(Shell) 전송 후, 클라이언트에서 데이터 준비되는 대로 UI 완성.
• 실험 및 성능 비교: 4개의 API(각기 다른 응답 시간)를 사용한 실험을 통해 Waterfall, Promise.all, No-Await (Streaming-like) 방식의 서버 로그 및 클라이언트 렌더링 차이 비교.
  • No-Await (Streaming-like): 가장 빠른 FCP (0.5s), INP (40ms), CLS (0.003) 달성. "즉시 뜨는 듯한" 인상과 매끄러운 화면 안정성 확보.

개발 임팩트:

• React Query v5.40.0과 Suspense를 통해 Next.js App Router에서 획기적으로 개선된 사용자 경험(UX)을 제공할 수 있습니다.
• SSR과 클라이언트 데이터 로딩의 비효율성을 해결하여 애플리케이션의 초기 로딩 속도와 반응성을 크게 향상시킵니다.
• 'Streaming-like' UX 구현으로 사용자에게 끊김 없이 매끄러운 인터페이스를 제공합니다.
• 성능 개선을 통해 Lighthouse 점수 상승 및 실제 사용자 체감 성능 향상.