문서
웹 서비스 캐시 똑똑하게 다루기
박서진 토스 · 토스 기술 블로그
AI 핵심 요약
HTTP 캐시는 브라우저와 CDN 등 여러 계층에 저장되며, 한 번 저장된 브라우저 캐시는 CDN Invalidation만으로 지울 수 없어 Cache-Control을 신중히 설정해야 합니다. 토스 프론트엔드 챕터는 HTML에 브라우저 재검증용 max-age=0과 CDN용 s-maxage를 조합하고, 배포 때 CDN 캐시를 무효화했습니다. JS와 CSS는 빌드마다 URL에 고유 버전을 붙여 콘텐츠가 바뀌지 않도록 하고, max-age를 1년으로 설정했습니다. 리소스의 변경 가능성과 캐시 위치에 맞춰 헤더를 설계하면 불필요한 요청과 트래픽을 줄이면서 최신 콘텐츠와 빠른 로딩을 함께 확보할 수 있습니다.
- max-age는 브라우저가 서버에 요청하지 않고 캐시를 사용할 수 있는 기간을 정하므로, 같은 URL의 콘텐츠가 바뀔 가능성을 고려해 설정하세요.
- no-cache는 저장 후 사용할 때마다 재검증하는 지시이고, no-store는 캐시 저장 자체를 금지합니다.
- CDN Invalidation은 CDN 캐시만 지우며 브라우저 캐시에는 영향을 주지 않습니다.
- ETag와 Last-Modified를 활용한 조건부 요청은 리소스가 그대로일 때 본문 없이 304 응답을 받을 수 있습니다.
소개
웹 성능을 위해 꼭 필요한 캐시, 제대로 설정하기 쉽지 않습니다. 토스 프론트엔드 챕터에서 올바르게 캐시를 설정하기 위한 노하우를 공유합니다.
