처음부터 다 보여줄 필요는 없잖아?
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
Next.js 및 React Query를 사용하는 웹 개발자, SSR 환경에서 성능 최적화를 고려하는 개발자
난이도: 중간 (React Query와 Suspense 개념 이해 필요)
핵심 요약
- Next.js + React Query 환경에서 SSR 성능 저하의 주요 원인은 '폭포수(Waterfall) 현상'
useSuspenseQueries
사용으로 병렬 API 호출을 통해 초기 렌더링 시간 단축 가능- Streaming SSR 활용으로 '모든 데이터가 준비될 때까지 기다리지 않도록' UI 조각 단위로 전송
섹션별 세부 요약
1. SSR의 문제점과 `useSuspenseQuery`의 한계
useSuspenseQuery
를 여러 개 사용할 경우, API 호출이 순차적으로 일어나며 초기 렌더링 시간이 늘어남- React의 Suspense 동작 원리로 인해 각 쿼리마다 컴포넌트가 다시 렌더링되며 폭포수 현상 발생
- 총 로딩 시간은 가장 오래 걸리는 단일 API 호출 시간에 비례
2. `useSuspenseQueries`로 병렬 fetching 개선
useSuspenseQueries
를 사용하면 모든 쿼리를 병렬로 실행 가능- 한 번의 Suspend로 초기 렌더링 시간이 크게 단축됨
- 모든 API 호출이 병렬로 이루어져 총 로딩 시간은 가장 오래 걸리는 API의 시간과 비슷해짐
3. Streaming SSR을 통한 UI 조각 전송
- Streaming SSR은 HTML을 청크 단위로 브라우저에 순차적으로 전송
- 데이터가 준비되기 전까지 Skeleton UI 또는 fallback UI를 제공하여 사용자에게 일부 UI를 먼저 보여줌
- FCP(First Contentful Paint) 시간이 0.8초에서 0.3초로 62.5% 개선됨
결론
- '폭포수 현상'을 해결하기 위해
useSuspenseQueries
를 사용하고, Streaming SSR을 통해 UI 조각 단위로 데이터를 전송 - Streaming SSR은 사용자가 전체 데이터가 준비될 때까지 기다리지 않도록 하여 UX 개선 효과
- Next.js SSR 환경에서 초기 렌더링 속도를 개선하기 위한 핵심 전략