핵심 요약
더핑크퐁컴퍼니가 Next.js App Router와 React Query v5.40.0의 Suspense를 활용해 prefetchQuery로 데이터를 스트리밍처럼 로딩하는 UX를 구현하고, SSR과 CSR의 경계를 매끄럽게 연결해 초기 화면 반응성을 대폭 개선했습니다.
구현 방법
- Next.js App Router + React Query v5.40.0, Suspense 기반 Streaming 로딩 구조
- 서버에서 prefetchQuery로 데이터를 먼저 불러오고 dehydration으로 클라이언트에 전달, HydrationBoundary로 점진 렌더링 지원
- 클라이언트 측 useSuspenseQuery를 통한 데이터 도착 순서에 맞춘 UI 갱신
주요 결과
- FCP 0.5s, INP 40ms, CLS 0.003으로 대폭 개선; Lighthouse 98점(FCP 0.5s, LCP 1.2s, CLS 0)
- 초기 화면이 거의 즉시 표시되며, 버튼 응답성 및 레이아웃 시프트가 크게 감소
