배경
웹 애플리케이션 성능 최적화를 위해 캐시는 필수적인 요소입니다. 다양한 캐싱 메커니즘이 존재하지만, 그중에서도 Cache-Control과 Tanstack Query에서 등장하는 cache의 개념을 비교해 보고자 합니다. 두 캐싱 메커니즘 모두 네트워크 요청을 줄이고 성능을 개선하는 데 사용되는 것 같은데 뭐가 다를까요?
캐시란?
우선 캐시의 개념부터 정리하겠습니다. 캐시는 자주 사용하는 데이터를 미리 복사해 둔 임시 저장 공간입니다. 파일을 매번 불러오지 않고, 처음에만 불러와 캐시에 저장해 두고 그 이후에는 저장해 둔 파일을 사용합니다. Network 패널에서 Disable cache 설정을 끄고 새로고침을 여러 번 하면 어떤 캐시를 사용하고 있는지 확인할 수 있어요.
브라우저에서 사용하는 캐시는 크게 2가지로 구분할 수 있습니다.
- memory cache : 메모리(RAM)에 저장해 빠르게 접근 가능
- disk cache : 파일 형태로 디스크에 저장하며 메모리 캐시보다 접근 속도 느림
사용할 캐시는 선택할 수 없고, 사용 빈도나 파일 크기에 따라 브라우저가 직접 결정합니다.
Cache-Control
캐시가 적용된 리소스를 클릭해 Response Headers를 보면 Cache-Control이라는 헤더를 볼 수 있습니다. Cache-Control은 리소스의 Response Headers에 서버가 설정한 헤더입니다. 브라우저는 이 헤더를 통해 캐시를 어떻게, 얼마나 적용할 것인지 판단합니다. 대표적으로 아래 5가지를 조합해 Cache-Control이 설정됩니다.
- public : 모든 환경에서 캐시 사용 가능
- private : 브라우저 환경에서만 캐시 사용 가능
- no-cache : 캐시를 사용하기 전 서버에 확인 후 사용
- no-store : 캐시를 사용하지 않음
- max-age : 캐시 유효 시간 (초 단위)
Cache-Control: public, max-age=31536000위와 같은 경우에는 public 옵션이 설정되어 모든 환경에서 1년(31,536,000초)동안 캐시를 사용할 수 있습니다.
Cache-Control은 HTTP 캐시와 관련된 개념으로, 서버와 브라우저 간 리소스 전달을 최적화하는 데 사용됩니다. 이를 통해 네트워크 트래픽을 줄이고 리소스 로딩 속도를 향상시킬 수 있습니다.
정적 파일인 HTML, CSS, 자바스크립트 파일과 이미지는 캐싱 대상이 됩니다.
항상 최신 버전을 제공하기 위해 일반적으로 HTML에는 no-cache 설정을 적용합니다.
빌드된 CSS와 자바스크립트 파일은 파일명에 해시를 가지고 있으며, 코드가 변경되면 해시도 변경되어 완전히 다른 파일이 되어버립니다.
따라서 캐시를 아무리 오래 적용해도 HTML만 최신 상태라면 최신 CSS, 자바스크립트 파일을 로드합니다.
TanStack Query의 cache
TanStack Query는 QueryClient를 통해 캐시에 접근합니다.
QueryClient 자체는 많은 작업을 수행하지 않으며, QueryCache 및 MutationCache에 대한 컨테이너 정도로 생각하면 됩니다.
QueryCache는 in-memory 객체입니다. 각 탭은 독립된 브라우저 메모리 공간을 할당받기 때문에 탭끼리 캐시가 공유되지 않습니다.
QueryCache의 key는 직렬화된 queryKey인 queryKeyHash이고, value는 Query 클래스의 인스턴스입니다.
주로 API 호출 결과를 캐싱하여 같은 데이터를 여러 번 요청할 필요가 없도록 합니다.
데이터를 특정 queryKey로 캐싱하고, staleTime, gcTime을 설정해 데이터를 관리합니다.
queryKey로 캐싱된 데이터는 staleTime 이후 fresh 상태에서 stale 상태로 변경됩니다.
쿼리 인스턴스가 unmount 되면 캐시는 gcTime만큼 유지되다가 가비지 컬렉터로 수집됩니다.
만약 gcTime을 지나지 않았고 쿼리 인스턴스가 fresh 상태라면, 새롭게 mount 될 때 캐시된 데이터를 그대로 보여줍니다.
결론
| 구분 | Cache-Control | TanStack Query |
|---|---|---|
| 주요 목적 | 서버와 클라이언트 간의 정적 리소스 캐싱 최적화 | 클라이언트에서 서버 상태 데이터를 효율적으로 관리 |
| 주체 | 서버가 제어 | 클라이언트가 제어 |
| 캐싱 대상 | 정적 리소스 (HTML, CSS, 자바스크립트, 이미지 등) | API 호출에 대한 데이터 |
| 캐시 위치 | 메모리 캐시 또는 디스크 캐시 | 메모리 캐시 |
| 캐시 유효성 검증 | 서버에서 설정한 max-age, ETag 등으로 관리 | 개발자가 설정한 staleTime, gcTime 등으로 관리 |
| 사용 사례 | 정적 파일을 제공할 때 네트워크 부하 감소 | 서버 상태 데이터를 효율적으로 관리해 API 호출 최적화 |
두 캐싱 메커니즘 모두 네트워크 요청을 줄이고 성능을 개선하지만, 적용 범위와 관리 주체가 다릅니다. Cache-Control은 서버에서 캐시 정책을 설정해 서버와 브라우저 간의 리소스 전달을 최적화하는 데 사용되는 반면, TanStack Query는 클라이언트 애플리케이션에서 데이터 패칭을 최적화하는 데 사용됩니다.