개발자도구 네트워크 탭의 disk cache와 memory cache로 살펴보는 HTTP 캐시 전략
개발자도구의 네트워크 탭을 보다보면 disk cache와 memory cache에서 가져오는 데이터가 꽤 많은 것을 볼 수 있습니다. 브라우저는 어떤 기준으로, 어떻게 이 데이터들을 저장하고 가져오고 있는 걸까요?
Memory Cache vs Disk Cache
먼저 Memory Cache와 Disk Cache를 구분하면 다음과 같습니다.
memory cache
- 페이지 로딩 중 같은 리소스를 여러 번 사용할 때
- SPA(Single Page Application)처럼 빠른 내부 이동이 있을 때
- 새로고침(F5 말고 페이지 네비게이션) 없이 다시 로딩할 때
- 아이콘, 로고와 같은 작은 사이즈의 이미지
disk cache
- 브라우저를 껐다 켜도 다시 써야 하는 리소스일 때
- 리소스 크기가 크고 오래 저장할 필요가 있을 때
- CSS, JS, Google Fonts, 큰 사이즈의 이미지 등
- 웹앱에 필요한 대형 리소스 파일
그럼 언제 캐시를 가져오는 건가요? 🤔
브라우저는 위 사진(출처: HTTP 완벽가이드)과 같은 절차를 거쳐 캐시를 저장하고 가져옵니다. HTTP 캐시 정책에 따라 응답을 어떻게 저장하고 가져오는지를 결정하는데요. 주로 Nginx와 같은 웹서버나 서버 코드, CDN 등에서 어떤 정책을 사용할지 지정할 수 있어요. 이때 주로 사용되는 HTTP Cache-Control 헤더의 캐시 지시자는 다음과 같습니다.
주요 Cache-Control 지시자
- Cache-Control: no-store : 캐시가 응답을 저장하는 것을 금지
- Cache-Control: no-cache: 재검사(변경 여부 확인) 없이 캐시 사용 금지
- Cache-Control: max-age: 지정된 시간까지 캐시 사용 가능
위 정책 등을 바탕으로 HTTP에서 저장된 캐시가 신선한 값이라고 판단한 경우, memory cache 혹은 disk cache에서 가져오게 됩니다.
HTTP 재검사(Revalidation)와 304 Not Modified
위 정책을 바탕으로 만약 캐시가 신선하지 않다고 판별한 경우, HTTP는 재검사(Revalidation)을 통해 해당 캐시가 신선한지 작은 재검사 요청을 통해 확인합니다. 이 방법은 캐시를 바로 가져오는 것보다는 느리지만, 캐시가 변하지 않았다면 데이터를 받아올 필요가 없기 때문에 새로 요청하는 것보다는 빠르다는 장점이 있습니다. 이때, 캐시 재검사를 위해서 사용하는 조건부 요청은 주로 If-Modified-Since 혹은 If-None-Match 헤더를 사용합니다.
If-Modified-Since
If-Modified-Since(IMS)는 리소스의 마지막 수정 날짜를 바탕으로 캐시가 신선하다고 판단할 경우 body없이 304응답(HTTP 304 Not Modified)을 보내고 캐시의 마지막 수정날짜를 업데이트합니다.
If-None-Match
If-None-Match는 ETag(Entity Tag)를 바탕으로 재검사 하는데, ETag(Entity Tag)는 리소스의 버전 식별자로써, 보통 데이터의 수정시간이나 크기를 바탕으로 만들어집니다. 때문에 상황에 따라 ETag를 유지하거나 변경함으로써 캐시 정책을 수정할 수 있어요.
If-None-Match를 사용한 인터페이스 과정은 다음과 같습니다.
- 서버에서 ETag를 포함한 응답을 보내면 브라우저는 서버와의 통신 과정에서 ETag를 브라우저 캐시 스토리지에 자동으로 저장한다.
- 이후 서버에 API를 요청할 때 저장한 ETag를 함께 전송한다.
- 이때 해당 ETag가 서버에서 응답할 ETag와 같다면 서버는 body없이 304응답(HTTP 304 Not Modified)을 보낸다.
요약
간단히 요약하자면, 브라우저는 웹서버나 서버코드 등에서 설정한 HTTP 캐시 정책에 따라 리소스를 memory cache 혹은 disk cache에 저장합니다. 그리고 재 요청 시 설정된 HTTP 캐시 정책에 따라 캐시가 신선한지를 판단합니다. 캐시가 신선하다면 빠르게 로딩할 수 있고, 만약 신선하지 않다면 ETag나 수정 시간 등을 이용해 재검사(Revalidation) 를 요청합니다.
➡️ 따라서 데이터의 크기와 성격, 그리고 서비스의 종류에 따른 적절한 캐시정책 설정이 필요합니다.
출처