tanstack-query에서 stale time과 gc time의 차이점

Tanstack-query에서 staleTime과 gcTime은 데이터를 캐싱하고 관리하는데 중요한 두 가지 설정 값이다.

 

---

1. staleTime

데이터가 얼마나 오래 '신선한 상태'로 유지되는지를 정하는 시간 

staleTime 내에는 같은 쿼리에 대한 새로운 네트워크 요청이 일어나지 않고, 캐시 데이터를 그대로 사용하게 된다. 

예를 들어 staleTime을 5분으로 설정하면, 데이터를 가져오고 나서 5분 동안 데이터가 '신선하다'고 판단해서 쿼리 호출 시 추가 네트워크 요청 없이 캐시 데이터를 계속 사용한다. 그리고 5분이 지난 후 해당 쿼리를 호출하면 새로운 요청을 보내서 데이터를 갱신한다. staleTime 기본값은 0임

 

---

2. gcTime

해당 쿼리를 사용하는 곳이 없게 된 이후에도 캐시 데이터를 얼마 동안 유지할지를 정하는 시간 

해당 쿼리가 더 이상 사용되지 않을 때, 캐시 데이터가 얼마나 더 남아 있을지를 정하는 시간임 

staleTime이 지나면 데이터는 '오래된' 상태가 되지만, 여전히 캐시 데이터는 사용이 가능하다. 이 캐시 데이턴느 새로운 요청을 보내 신선한 데이터를 받아오기 이전에 임시로 기존 데이터를 표시하는데 활용된다. 

다만, 해당 쿼리가 사용되지 않게 된 시점으로부터 gcTime으로 설정된 시간이 지나면 캐시에서 데이터가 삭제된다. 

예를 들어 gcTime을 10분으로 설정하면, 해당 쿼리를 사용하는 컴포넌트가 모두 언마운트된 시점으로부터 10분 후에 캐시에서 데이터가 삭제된다. 기본값은 5분임

 

 

 

정리해서 말씀드려보자면, staleTime은 데이터를 처음 가져온 후 얼마 동안 네트워크 요청 없이 캐시된 데이터를 사용할지를 정하는 시간이고, gcTime은 해당 쿼리가 사용되지 않게 된 후에도 캐시에 유지될 시간을 정하는 겁니다. 이렇게 각각의 설정을 통해 데이터를 더 효율적으로 관리하고, 불필요한 네트워크 요청을 줄이면서도 최신 데이터를 가져올 수 있도록 합니다.

---

 

 

https://tanstack.com/router/latest/docs/framework/react/api/router/RouteOptionsType#staletime-property

RouteOptions type | TanStack Router React Docs