금요일

# TanStack Query staleTime: 캐시 신선도 전략과 최적화 React Query(TanStack Query)의 staleTime 설정으로 캐시 신선도와 성능을 최적화하는 방법입니다. ## 핵심 개념 **staleTime (기본: 0)** - 데이터가 "신선한(fresh)" 상태로 유지되는 시간 - 이 시간이 지나면 데이터는 "오래됨(stale)" 표시 - 오래된 데이터도 여전히 캐시에 있지만, 특정 상황에서 재검증 대상 **gcTime (기본: 5분, 구 이름 cacheTime)** - 사용 중이 아닌 캐시를 메모리에 유지하는 시간 - 이 시간 후 캐시 완전 삭제 ## 데이터별 staleTime 추천 | 데이터 특성 | staleTime | 이유 | |---------|-----------|------| | 거의 변경 안 됨 | 30분~1시간 | 네트워크 요청 최소화 | | 가끔 변경 | 5~15분 | 적절한 신선도 유지 | | 자주 변경 | 10~30초 | 실시간성 중시 | | 실시간 필수 | 0 (즉시 오래됨) | 항상 재검증 | ## 해결책 1. **데이터 특성별 설정**: 마스터 데이터는 긴 staleTime, 실시간 데이터는 짧은 시간 2. **조건부 재검증**: Polling + Manual Refetch로 필요할 때만 재검증 3. **글로벌 기본값**: QueryClient에서 기본값 설정으로 일관성 유지 4. **백그라운드 재검증**: refetchOnWindowFocus: 'stale'로 부드러운 업데이트 **핵심**: staleTime은 "얼마나 자주 네트워크 요청을 할 것인가"를 결정합니다. 데이터의 변경 빈도와 UX 요구사항에 맞춰 조정하면 성능과 신선도의 균형을 맞출 수 있습니다.

댓글 없음:

댓글 쓰기