웹 캐시란?

웹 캐시 (Web Cache, HTTP Cache)는 불필요한 대역폭 낭비와 응답 지연을 방지하기 위해 데이터의 사본을 임시적으로 저장하는 기술이다.

 

https://web.archive.org/web/20150923231812/http://www.cisco.com/web/about/ac123/ac147/ac174/ac199/about_cisco_ipj_archive_article09186a00800c8903.html

Web Caching - The Internet Protocol Journal - Volume 2, No. 3

 

There are two types of Web caches a browser cache and a proxy cache. A browser cache is part of all popular Web browsers. The browser keeps a local copy of all recently displayed pages, and when the user returns to one of these pages, the local copy is reused. By contrast, a proxy cache is a shared network device that can undertake Web transactions on behalf of a client, and, like the browser, the proxy cache stores the content. Subsequent requests for this content, by this or any other client of the cache, will trigger the cache to deliver the locally stored copy of the content, avoiding a repeat of the download from the original content source.

 

웹 캐시에는 브라우저 캐시와 프록시 캐시의 두 가지 유형이 있습니다. 브라우저 캐시는 모든 인기 있는 웹 브라우저의 일부입니다. 브라우저는 최근에 표시된 모든 페이지의 로컬 사본을 보관하고 사용자가 이러한 페이지 중 하나로 돌아가면 로컬 사본이 재사용됩니다. 반면 프록시 캐시는 클라이언트를 대신하여 웹 트랜잭션을 수행할 수 있는 공유 네트워크 장치이며 브라우저와 마찬가지로 프록시 캐시는 콘텐츠를 저장합니다. 이 캐시 또는 다른 캐시 클라이언트가 이 콘텐츠에 대한 후속 요청을 하면 캐시가 로컬에 저장된 콘텐츠 사본을 전달하여 원래 콘텐츠 소스에서 다운로드를 반복하지 않도록 합니다.

 

웹 캐시는 다양한 종류가 있지만, 크게 두 가지로 구분할 수 있다.

캐시된 데이터가 웹 브라우저에 저장된다면 브라우저 캐시 (Browser Cache), 

중간 서버에 저장된다면 프록시 캐시 (Proxy Cache)라고 한다.

 

또한 브라우저 캐시를 Private Cache, 프록시 캐시를 Public Cache라고도 부른다.

 

이 게시글에서 다룰 캐시는 브라우저 캐시라고 가정한다.

실제로 브라우저를 통해 캐시된 리소스를 직접 확인해 보자.

 

https://support.google.com/webmasters/community-guide/260250256/%EA%B5%AC%EA%B8%80-%EC%A0%80%EC%9E%A5%EB%90%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%BA%90%EC%8B%9C%EB%90%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%ED%99%95%EC%9D%B8-%EB%B0%A9%EB%B2%95-%EB%AA%87-%EA%B0%80%EC%A7%80-%EC%86%8C%EA%B0%9C?hl=ko

구글 저장된 페이지(캐시된 페이지) 확인 방법 몇 가지 소개 - Google 검색 센터 커뮤니티

 

구글 공식 사이트에 따르면, 브라우저 주소창에 "cache:도메인"을 검색하여 캐시된 페이지를 직접 살펴볼 수 있다.

참고로 이 방법은 크롬 브라우저에서만 가능하며, "cache:naver.com"을 검색해 보자.

 

 

상단의 알림창을 통해 브라우저에 해당 웹 페이지가 캐시된 날짜를 확인할 수 있으며, 당일 새벽 5시 9분에 캐싱된 것을 알 수 있다.

실제 웹 페이지를 요청하여 비교해 보자.

 

 

날씨나 코스닥 지수 등 동적 컨텐츠보다는 정적 컨텐츠가 캐싱 대상임을 확인할 수 있다.

오늘이 제헌절이기 때문에, 내일 새벽 5시쯤 다른 검색 창 그림이 캐싱되지 않을까 싶다.

 

앞서 캐시는 리소스의 '사본'을 임시로 저장하는 기술이라고 설명했다.

즉, 캐시를 했다면 항상 원본 데이터가 변경되는 상황에 대비해야 한다.

 

HTTP/1.1 200 OK
---
생략
---
Cache-Control: max-age=60

이를 위해 서버에서는 일반적으로 Cache - Control 헤더를 통해 데이터에 캐시 유효 시간을 설정한다.

위의 예시는 해당 데이터의 캐시 유효 시간이 60초인 상황이다.

 

HTTP/1.1 200 OK
---
생략
---
Cache-Control: max-age=60
[1] Last-Modified: Wed, 17 July 2024 12:00:00 GMT
[2] Etag: "v0.0.1"

또한 서버는 리소스를 캐싱할 때 일반적으로 위 두 가지의 헤더 중 한 가지 헤더를 함께 사용한다.

 

[1]번 헤더는 "날짜"를 기반으로 데이터의 최신 상태를 표현할 때 사용한다. 

[2]번 헤더는 "엔티티 태그"를 기반으로 데이터의 최신 상태를 표현할 때 사용한다.

엔티티 태그는 쉽게 말해 버전 식별자라고 생각하면 된다. 

 

캐시 유효 시간이 만료되면, 클라이언트는 자원이 여전히 최신 상태인지 검증해야 한다.

이때 클라이언트는 두 가지 검증 헤더를 사용할 수 있다.

 

GET /example HTTP/1.1
---
생략
---
If-Modified-Since: Wed, 17 July 2024 12:00:00 GMT

서버가 Last-Modified 헤더를 사용하였다면 클라이언트는 If-Modified-Since 헤더를 사용하여 서버에게 검증 요청을 전송하고,

 

GET /example HTTP/1.1
---
생략
---
If-None-Match: "v0.0.1"

서버가 Etag 헤더를 사용하였다면 클라이언트는 If-None-Match 헤더를 사용하여 서버에게 검증 요청을 전송한다.

 

이렇게 클라이언트에서 검층 요청을 전송했다면, 이후 나타날 수 있는 상황은 두 가지이다.

 

1. 서버에서 기존 데이터를 변경함

2. 서버에서 기존 데이터를 변경하지 않음

 

1번 상황의 경우, 서버는 200 OK와 함께 새로운 데이터를 응답한다.

이때 클라이언트가 If-Modified-Since 헤더를 사용했다면 서버는 Last-Modified 헤더를 통해 변경 날짜를 함께 응답하고,

클라이언트가 If-None-Match 헤더를 사용했다면 서버는 Etag 헤더를 통해 변경 엔티티 태그를 함께 응답한다.

 

또한 2번 상황의 경우, 서버는 Body가 없는 304 Not Modified 응답을 통해 데이터가 변경되지 않았음을 알린다.

 

 

 

Reference

https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC/dashboard

모든 개발자를 위한 HTTP 웹 기본 지식 강의 | 김영한 - 인프런