TanStack Query에서 staleTime은 받아 온 데이터를 얼마 동안 신선하다고 볼지(다시 요청할지)를, gcTime(Garbage Collection Time)은 아무도 쓰지 않는 캐시를 얼마 동안 메모리에 둘지(언제 지울지)를 정한다. 같은 캐시에 대한 서로 다른 두 손잡이다.
| staleTime | gcTime | |
|---|---|---|
| 관심사 | 신선도 → 재요청 여부 | 메모리 → 캐시 삭제 |
| 시계가 도는 때 | 데이터를 받은 직후부터 | 쿼리가 inactive(구독 컴포넌트 0개)가 된 뒤부터 |
| 기본값 | 0(받자마자 stale) | 5분 |
stateDiagram-v2 state "fresh" as F state "stale (캐시엔 있음)" as S state "inactive (구독 컴포넌트 0개)" as I [*] --> F: 마운트 → fetch F --> S: staleTime 경과 S --> F: 트리거 시 백그라운드 재요청 F --> I: 언마운트 S --> I: 언마운트 I --> [*]: gcTime 경과 → 캐시에서 삭제
- fresh한 동안에는 재마운트나 창 포커스가 와도 요청하지 않는다. 기본값 0은 "왜 안 바뀌지?"보다 "항상 갱신"이 낫다는 판단이다
- 이름: v4까지
cacheTime이었고 v5에서gcTime으로 바뀌었다. 그리고 gcTime은 stale이 된 뒤가 아니라 inactive가 된 뒤 시작된다 - 실무에서 주로 만지는 것은
staleTime이다. 잘 안 바뀌는 데이터(카테고리, 설정)는 길게 잡는다 gcTime을 만지는 경우- 한참 뒤 돌아와도 즉시 이전 화면을 보여 주고 싶을 때(길게)
- 데이터가 크거나 다시 볼 일이 없을 때(짧게)
- 민감한 데이터를 화면을 떠나면 바로 지우고 싶을 때(
0) - 캐시를 localStorage 등에 영속화할 때(길게)
staleTime이gcTime보다 길면 의미가 줄어든다. 아직 fresh인데 캐시가 지워져 버릴 수 있어서 보통gcTime ≥ staleTime으로 둔다
HTTP(HyperText Transfer Protocol) 쪽의 같은 아이디어는 브라우저 캐시의 max-age·stale-while-revalidate, ISR(Incremental Static Regeneration)의 재생성 주기(CSR·SSR·SSG·ISR)다. 전체 흐름은 TanStack Query.