개발 트러블슈팅 완전 정복 | 웹개발·백엔드·데브옵스 실무 에러 해결법. Docker, GitHub Actions, TypeScript, MySQL, Redis 등 실전 경험 기반의 개발 블로그
금요일
# 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 요구사항에 맞춰 조정하면 성능과 신선도의 균형을 맞출 수 있습니다.
피드 구독하기:
댓글 (Atom)
댓글 없음:
댓글 쓰기