피드로 돌아가기
Dev.toFrontend
원문 읽기
TanStack Query 도입을 통한 UI Flicker 제거 및 시각적 안정성 확보
Why Your Nextjs UI Flickers: TanStack Query vs useEffect
AI 요약
Context
Next.js 환경에서 단순 useEffect 기반의 데이터 페칭 시 발생하는 Loading state 리셋과 Layout shift 문제 분석. 데이터 갱신 시마다 콘텐츠가 사라지는 UI 불안정성으로 인한 사용자 경험 저하 해결 필요.
Technical Solution
- Loading state의 무조건적 리셋을 방지하는 Background Refetching 구조 채택
- 이전 데이터를 유지하며 새로운 데이터를 fetch하는 Stale-While-Revalidate 전략 적용
- 데이터 변경 사항이 발생한 지점만 선택적으로 업데이트하는 효율적 UI 렌더링 설계
- Hydration 이후의 Data Strategy를 Rendering Strategy와 분리하여 독립적 관리
- 네트워크 지연 상황에서도 기존 UI를 보존하는 캐싱 레이어 구축을 통한 시각적 연속성 유지
실천 포인트
1. 데이터 갱신 시 loading state가 전체 화면을 덮는지 확인
2. Background fetch 중 기존 데이터의 가시성 유지 여부 검토
3. API 응답 속도와 별개로 UI의 시각적 안정성(Stability) 지표 설정
4. Next.js의 Rendering 전략과 별도로 클라이언트 데이터 상태 관리 라이브러리 도입 고려