HTTP 헤더2 - 캐시와 조건부 요청

캐시 기본 동작

첫번째 요청

만약 웹 브라우저에서 star.jpg를 요청하면 서버에서 별과 관련된 그림을 내려줄 것이다.

star.jpg의 응답을 내려주는데 실제 이미지와 관련된 바이트코드들이 있을 것이다.

 

캐시가 없다면, 웹 브라우저에서 다시 star.jpg를 요청했을 때 서버에서 똑같이 별과 관련된 그림을 다시 내려줄 것이다.

위 두 그림을 보자. 헤더와 바디부가 똑같은 응답을 동일한 웹 브라우저에 다시 내려주는 것이다.

 

캐시가 없을 때

- 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야 한다.

- 인터넷 네트워크는 매우 느리고 비싸다.

- 브라우저 로딩 속도가 느리다.

- 느린 사용자 경험

 

--> 캐시를 사용 함으로써 위와 같은 문제를 해결해줄 수 있다.

 

서버에서 캐시를 적용하였다. cache-control

웹 브라우저에는 내부에 캐시를 저장할 수 있는 캐시 저장소가 있다.

이 캐시 응답 결과를 저장한다.

 

이후 두번째 요청을 할 땐 우선적으로 캐시를 뒤져본다.

 

 

캐시에 있다면 캐시에서 바로 조회를 통해 네트워크를 탈 필요를 줄이는 것이다.

 

캐시 적용

- 캐시 덕분에 캐시 가능 시간동안 네트워크를 사용하지 않아도 된다.

- 비싼 네트워크 사용량을 줄일 수 있다.

- 브라우저 로딩 속도가 매우 빠르다.

- 빠른 사용자 경험

 

 

만약 캐시가 시간초가과 되면 어떻게 될까? 서버에서는 캐시의 유효한 시간을 cache-control을 통해 지정해주었다.

60초가 지난 이후엔 재차 서버에 다시 요청을 해야 한다.

 

이후 받은 데이터를 가지고 다시 캐시에 저장한다.(cache-control의 max-age가 60이기 때문에)

 

 

캐시 시간 초과

- 캐시 유효 시간이 초과하면, 서버를 통해 데이터를 다시 조회하고, 캐시를 갱신한다.

- 이떄 다시 네트워크 다운로드가 발생한다.

 

 

 

 

검증 헤더와 조건부 요청1

위에서 본 캐시 유효 시간이 초과해서 서버에 다시 요청하면 다음 두 가지 상황이 나타난다.

1. 서버에서 기존 데이터를 변경함                      ★ -> ☆

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

 

만약 60초가 초과하고 다시 요청을 했는데 서버쪽에서 변경사항이 전혀 없을 때 기존이랑 똑같은 ★를 다시 다운로드 받게 된다. 이걸 처음부터 다시 다운로드 받을 필요가 있을까?

-> 이 문제를 해결하기 위한 것이 검증 헤더와 조건부 요청이다.

 

캐시 시간 초과

캐시 만료 후에도 서버에서 데이터를 변경하지 않았다.

생각해보면 데이터를 전송하는 대신에 저장해두었던 캐시를 재사용할 수 있다.

단 클라이언트의 데이터와 서버의 데이터가 같다는 사실을 확인할 수 있는 방법이 필요하다

 

 

 

검증 헤더 추가

서버에서의 응답을 보면 Last-Modified를 추가해주었다. Last-Modified는 데이터가 마지막에 수정된 시간을 적어주는 것이다.

그렇게 되면 캐시에 응답 결과(★)을 저장하면서 데이터의 최종 수정일 또한 같이 적게 된다.

 

60초가 지난 이후엔 어떻게 될까?

서버에서 요청을 보낼때 캐시가 가지고 있는 데이터의 최종 수정일까지 포함하여 요청을 보낸다.

서버에선 이 요청을 받고 최종 수정일을 비교해본다.

 

데이터가 아직 수정되지 않았기 때문에 서버에서 응답을 내려줄 때

 

304 Not Modified를 보낸다(요청한게 변경된 사항이 없다는 뜻)

응답을 내려줄 떄 http body가 없이 전송된다.

body 부분이 없기 때문에 전송되는 양도 작아지고, 네트워크의 부하가 줄어든다.

 

응답 결과를 재사용하고 헤더 데이터를 갱신한다.

 

 

검증 헤더와 조건부 요청 정리

- 캐시 유효 시간이 초과해도, 서버의 데이터가 갱신되지 않으면

- 304 Not Modified + 헤더 메타 정보만 응답(바디는 없다)

- 클라이언트는 서버가 보낸 응답 헤더 정보로 캐시의 메타 정보를 갱신한다.

- 클라이언트는 캐시에 저장되어 있는 데이터를 재활용한다.

- 결과적으로 네트워크 다운로드가 발생하긴 하지만 용량이 적은 헤더 정보만 다운로드 한다.

- 매우 실용적인 해결책이다.

 

 

 

검증 헤더와 조건부 요청2

검증 헤더

  - 캐시 데이터와 서버 데이터가 같은지 검증하는 데이터

  - Last-Modified, ETag

 

조건부 요청 헤더

  - 검증 헤더로 조건에 따른 분기

  - If-Modified-Since : Last-Modified 사용

  - If-None-Match : ETag 사용

  - 조건이 만족하면 200OK

  - 조건이 만족하지 않으면 304 Not Modified

 

If-Modified-Since : 이후에 데이터가 수정되었으면?

  - 데이터 미변경시 -> 304 Not Modified, 헤더 데이터만 전송(Body 미포함)

  - 데이터 변경 시 -> 200OK, 모든 데이터 전송(BODY 포함)

 

* Last-Modified, If-Modified-Since 단점

1. 1초 미만(0.x) 단위로 캐시 조정이 불가능하다.

2. 날짜 기반의 로직을 사용한다.

3. 데이터를 수정해서 날짜가 다르지만, 같은 데이터를 수정해서 데이터 결과가 똑같은 경우에도 재전송해야하는 문제가 있다.

4. 서버에서 별도의 캐시 로직을 관리하고 싶은 경우

    ex)스페이스나 주석처럼 크게 영향이 없는 변경에서 캐시를 유지하고 싶은 경우

 

 

서버에서 완전하게 캐시 매커니즘을 컨트롤 하여 위와 같은 문제를 해결할 수 있다. ETag를 이용하는 것이다.

 

 

 

ETag, If-None-Match

- ETag(Entity Tag)

- 캐시용 데이터에 임의의 고유한 버전을 달아둔다.

    - ex) ETag: "v1.0", ETag : "a2jawefibv3"

- 데이터가 변경되면 이 이름을 바꾸어서 변경한다(해시값을 다시 생성)

    - ex) ETag: "aaaaa" -> ETag: "bbbbb"

- 진짜 단순하게 ETag만 보내서 같으면 유지하고 다르면 다시 받으면 된다.

 

ETag를 사용하는 예시를 보자 이번에 서버에서는 ETag라는 값을 내려준다.

 

응답 받을 데이터를 브라우저 캐시에 저장하고, 60초가 지났다고 가정하자. 그렇다면 당연히 서버에 ETag와 함께 요청을 보낼 것이다.

 

ETag를 검증해보니 아직 수정되지 않았다.

 

그럼 이전처럼 HTTP Body가 없는 응답을 내려줄 것이다.

그럼 캐시에 있는 결과를 재사용 할 것이고 cache-control의 헤더 데이터만 갱신해 줄 것이다.

 

 

 

ETag, If-None-Match 정리

- 진짜 단순하고 ETag만 서버에 보내서 같으면 유지하고, 다르면 다시 받는다

- 캐시 제어 로직을 서버에서 완전하게 관리한다

- 클라이언트는 단순히 이 값을 서버에 제공한다.(클라이언트는 캐시 메커니즘을 알 수 없다

ex) 서버는 베터 오픈 기간인 3일동안 파일이 변경되어도 ETag를 동일하게 유지한다.

      애플리케이션 배포 주기에 맞추어 ETag를 모두 갱신한다.

 

 

캐시와 조건부 요청 헤더

 

캐시 제어 헤더

- Cache-Control : 캐시 제어

- Pragma : 캐시 제어(하위 호환)

- Expires : 캐시 유효 기간(하위 호환)

 

Cache-Control(*제일 중요)

캐시 지시어(directives)

- Cache-Control: max-age     ->    캐시 유효 시간, 초 단위

- Cache-Control: no-cache    ->    데이터는 캐시해도 되지만, 항상 원(origin) 서버에 항상 검증하고 사용한다.

- Cache-Control: no-store      ->    데이터에 민감한 정보가 있으므로 저장하면 안된다.(메모리에서 사용하고 빨리 삭제)

 

expires

캐시 제어(하위호환)

- Pragma: no-cache

- HTTP 1.0 하위 호환이다. 거의 사용하지 않는다.

 

Expires

캐시 만료일 지정(하위 호환)

- expires: Mon, 01 Jan 1990 00:00:00 GMT

- 캐시 만료일을 정확한 날짜로 지정한다.

- HTTP 1.0부터 사용한다.

- 지금은 더 유연한 Cache-Control: max-age 사용을 권장한다.

 

 

 

프록시 캐시

 

만약 미국에 진짜 소스가 있다고 가정하자, 만약 한국에서 접속하여 원 소스를 다운로드 받으려면 각 클라이언트마다 0.5초씩의 소모가 있다면 많은 자원이 소모되고, 느릴수밖에 없다.

 

 

이 문제를 해결하기 위해 프록시 캐시 서버를 도입하여 자원 소모를 줄여줄 수 있다.

한국 어딘가에 프록시 캐시 서버를 넣어놓고 DNS요청이 올 떄마다 미국에 있는 원 서버에 가는 것이 아닌 프록시 캐시 서버를 한번씩 거치도록 설계하였다.

즉 웹 브라우저가 프록시 캐시 서버에 접근하도록 만드는 것이다.

기존에 0.5초가 걸렸던 응답이 0.1초만에 이루어질 수 있게 된다.

 

-> 그래서 유튜브 같은걸 빨리 볼 수 있다. 한국 사람들이 잘 안보는 외국 유튜브를 보면 로딩 속도가 느리지만, 많이 보는 컨텐츠의 경우 로딩 속도가 정말 빠르다. 미국에 있는 서버에서 다운 받는 것이 아닌 한국에 있는 서버 어딘가에서 다운로드를 받기 때문이다.

 

 

Cache-Control

캐시 지시어(directives) - 기타

- Cache-Control: public    ->    응답이 public 캐시에 저장되어도 됨

- Cache-Control: private   ->    응답이 해당 사용자만을 위한 것임, private 캐시에 저장해야 함(기본값)
- Cache-Control: s-maxage    ->    프록시 캐시에만 적용되는 max-age

- Age: 60(HTTP 헤더)    -> 오리진 서버에서 응답 후 프록시 캐시 내에 머

 

 

캐시 무효화

캐시 컨트롤시 확실한 캐시 무효화 응답을 할 수 있다.

-Cache-Control: no-chache, no-store, must-revalidate

- Pragma: no-cache

  - HTTP 1.0 하위 호환