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

 

캐시 기본 동작

캐시가 없으면 웹 브라우저는 서버에게 star.jpg라는 이미지 파일을 요청하고 다운로드하는 과정을

요청을 할때마다 계속 반복될 것이다.

이것은 사용자의 입장으로 매우 느리고 답답한 경험이 될 것이다.

캐시가 없을 때

· 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드하여야 한다.
· 인터넷 네트워크는 매우 느리고 비싸다
· 브라우저 로딩 속도가 느리다.
· 느린 사용자 경험

캐시를 적용하면 웹 브라우저에서 서버에게 star.jpg 이미지 파일을 요청하면

서버는 응답 메시지의 헤더 태그에 예를 들어 cache-control: max-age=60이라고 응답을 한다.

그러면 해당 이미지 파일은 브라우저의 캐시를 저장하는 곳에서 60초 동안 유효된다.

그리고 두 번째 요청을 하게 되면, 웹 브라우저는 먼저 캐시에서 조회를 하고,

60초 이내에 조회를 하면 서버에 요청을 하는 것이 아닌, 브라우저 캐시를 사용하게 된다.

캐시 적용

· 캐시 덕분에 캐시 가능 시간 동안 네트워크를 사용하지 않아도 된다.
· 비싼 네트워크 사용량을 줄일 수 있다.
· 브라우저 로딩 속도가 매우 빠르다.
· 빠른 사용자 경험

---

검증 헤더와 조건부 요청 1

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

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

캐시의 유효 시간이 만료해서 클라이언트에서 서버에게 데이터가 변하지 않은 star.jpg 이미지 파일을 

다시 요청한다면 다시 무거운 이미지 파일을 다운로드 받아야한다.

이러한 문제점을 해결하기 위한 방법이 검증 헤더와 조건부 요청이다.

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

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

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

그 방법으로 검증 헤더가 추가된다.

cache-controle:max-age=60
Last-Modified:2022년 10월 21일 10:00:00

위 예시는 서버에서 웹 브라우저에게 응답 메시지의 캐시 관련 헤더이다.

cache-controle로 60초의 캐시 유효 시간이 있고 Last Modified가 있다.

Last Modified는 이 데이터가 마지막에 수정된 시간이다.

그리고 웹 브라우저에서 캐시가 만료된 후 서버에 요청을 보낸다면 if-modified-since(조건부 요청)를 보내게 된다.

if-modified-since는 처음 응답받았던 Last Modified의 내용과 일치한다.

여기서 if-modified-since는 조건부 요청이고, Last Modified는 검증 헤더이다.

그럼 서버에서 데이터의 최종 수정일을 확인하고, 일치하다면 데이터가 변경되지 않았으니

캐시 데이터를 쓰라는 HTTP Body를 제외한 헤더만 보내게 된다.

예를 들어 HTTP Body(이미지 데이터)의 양이 1M이고 헤더가 0.1M이라면 0.1M만 웹 브라우저로 전송하는 것이다.

그러면 웹 브라우저는 로컬 캐시에 저장되어있는 캐시를 다시 사용하게 된다.

정리

· 캐시 유효 시간이 초과해도, 서버의 데이터가 갱신되지 않으면 304 Not Modified + 헤더 메타 정보만 응답(바디 X)
· 클라이언트는 서버가 보낸 응답 헤더 정보로 캐시의 메타 정보를 갱신
· 클라이언트는 캐시에 저장되어 있는 데이터 재활용
· 결과적으로 네트워크 다운로드가 발생하지만 용량이 적은 헤더 정보만 다운로드
· 매우 실용적인 해결책

대부분의 웹 브라우저들은 이러한 메커니즘을 전부 활용하고 있다.

---

검증 헤더와 조건부 요청 2

검증 헤더
  · 캐시 데이터와 서버 데이터가 같은지 검증하는 데이터
  · Last-Modified , ETag

조건부 요청 헤더
  · 검증 헤더로 조건에 따른 분기
  · If-Modified-Since: Last-Modified 사용
  · If-None-Matce: ETag 사용
  · 조건이 만족하면 200 OK
  · 조건이 만족하지 않으면 304 Not Modified

웹 브라우저가 요청을 할 때 서버에서 데이터가 변경된 예시와 변경되지 않은 예시는 다음과 같다.

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

  · 데이터 미변경 예시
      → 캐시: 2022년 10월 21일 10:00:00 vs 서버: 2022년 10월 21일 10:00:00
      → 304 Not Modified, 헤더 데이터만 전송(BODY 미포함)
      → 전송 용량 0.1M (헤더 0.1M)

  · 데이터 변경 예시
      → 캐시: 2022년 10월 21일 10:00:00 vs 서버: 2022년 10월 21일 11:00:00
      → 200 OK, 모든 데이터 전송(BODY 포함)
      → 전송 용량 1.1M (헤더 0.1M, 바디 1.0M)

하지만 Last-Modified와 if-Modified-Since 또한 단점이 존재한다.

Last-Modified, if-Modified-Since 단점

· 1초 미만(0.x초) 단위로 캐시 조정이 불가능
· 날짜 기반의 로직 사용
· 데이터를 수정해서 날짜가 다르지만, 같은 데이터를 수정해서 데이터 결과가 똑같은 경우
· 서버에서 별도의 캐시 로직을 관리하고 싶은 경우
      예) 스페이스나 주석처럼 크게 영향이 없는 변경에서 캐시를 유지하고 싶은 경

그리고 또 다른 검증 헤더와 조건부 요청이 ETag, if-None-Match이다.

ETag, If-None-Match

· ETag(Entity Tag)
· 캐시용 데이터에 임의의 고유한 버전 이름을 달아둠
   예) ETag: "v1.0", ETag: "a2jiodwjekjl3"
· 데이터가 변경되면 이 이름을 바꾸어서 변경함(Hash를 다시 생성)
   예) ETag: "aaaaa" → ETag: "bbbbb"
· 진짜 단순하게 ETag만 보내서 같으면 유지, 다르면 다시 받기

이렇게 ETag,If-None-Match는 정말 단순하게 ETag만 서버에 보내서 같으면 유지하고 다르면 다시 받는 것이다.

ETag의 중요한 점은 캐시 제어 로직을 서버에서 완전히 관리한다.

클라이언트는 단순히 이 값을 서버에 제공만 하는 것이다.(클라이언트는 캐시 메커니즘을 모른다.)

예를 들면 애플리케이션 배포 주기에 맞추어 ETag를 모두 갱신하는 것이 있다.

검증 헤더 (Validator)
  · ETag: "v1.0", ETag: "asid93krh2l"
  · Last-Modified: Thu, 04 Jun 2022 8:14:53 GMT

조건부 요청 헤더
  · If-Match, If-None-Match: ETag 값 사용
  · If-Modified-Since, If-Unmodified-Since: Last-Modified 값 사용

---

캐시와 조건부 요청 헤더

캐시 제어 헤더

Cache-Control: 캐시 지시어(directives)
· Cache-Control: max-age
   → 캐시 유효 시간, 초 단위
· Cache-Control: no-cache
   → 데이터는 캐시 해도 되지만, 항상 원(origin) 서버에 검증하고 사용
· Cache-Control: no-store
   → 데이터에 민감한 정보가 있으므로 저장하면 안 됨
        (메모리에서 사용하고 최대한 빨리 삭제)

Pragma: 캐시 제어(하위 호환)
· Pragma:no-cache
· HTTP 1.0 하위 호환
· 지금은 거의 사용하지 않음

Expires: 캐시 유효 기간(하위 호환)
· expires: Mon, 01 Jan 1990 00:00:00 GMT
· 캐시 만료일을 정확한 날짜로 지정
· HTTP 1.0부터 사용
· 지금은 더 유연한 Cache-Control: max-age 권장
· Cache-Control: max-age와 함께 사용하면 Expores는 무시

---

프록시 캐시

만약 미국에 있는 서버에서 한국의 웹 브라우저까지 데이터를 가져오는 속도를

매우 긍정적으로 생각하여 500ms(0.5초)라고 가정을 한다면,

사용자의 입장에서는 답답함을 느낄수도있다.

그렇게 만들어진것이 프록시 캐시이다.

제일 최초로 원 서버에서 요청을 한 웹 브라우저는 원 서버에서 데이터를 가져오는 것이기 때문에

느리게 응답을 받을 수도 있다.

하지만 두 번째 이후로 요청한 웹 브라우저들은 미국에 있는 원 서버가 아닌, 한국 어딘가에 있는

프록시 캐시 서버에서 데이터를 가져오는것이기 때문에 매우 빠르게 응답을 받는다.

이렇게 프록시 캐시 서버는 중간에서 공용으로 사용하는 캐시 서버이다.

여기서 프록시 캐시 서버에 있는 캐시를 public 캐시이며, 웹 브라우저의 로컬 캐시에 있는 캐시를 private 캐시라고 한다.

Cache-Control
캐시 지시어(directives) - 기타

Cache-Control: public
    · 응답이 public 캐시에 저장되어도 됨
Cache-Control: private
  · 응답이 해당 사용자만을 위한 것임, private 캐시에 저장해야 함(기본값)
Cache-Control: s-maxage
  · 프록시 캐시에만 적용되는 max-age
Age:60 (HTTP 헤더)
  · 오리진 서버에서 응답 후 프록시 캐시 내에 머문 시간(초)

이렇게 원래 진짜 자원을 가지고 있는 서버는 원 서버, 중간에 공용으로 사용하는 캐시 서버는 프록시 캐시 서버이다.

---

캐시 무효화

만약 웹 브라우저로 돈 관련이나 개인의 신상이 캐시로 남게 되면 위험할 수 있다.

그럴 때는 확실한 캐시 무효화 응답을 해야 한다.

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache ( HTTP 1.0 하위 호환 )

위 헤더는 확실한 캐시 무효화 헤더이다.

확실하게 캐시를 무효화하기 위해서는 위 헤더를 모두 써야 한다.

Pragma 또한 혹시나 모를 HTTP 1.0 이하의 서버에서의 요청이 올 수도 있으니 대비해야 한다.

Cache-Control
캐시 지시어(direvtives) - 확실한 캐시 무효화

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

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

Cache-Control: must-revalidate
  · 캐시 만료 후 최초 조회 시 원 서버에 검증해야 함
  · 원 서버 접근 실패 시 반드시 오류가 발생해야 함 - 504(Gateway Timeout)
  · must-revalidate는 캐시 유효 시간이라면 캐시를 사용함

Pragma: no-cache
  · HTTP 1.0 하위 호환

---

출처: [인프런]모든 개발자를 위한 HTTP 웹 기본 지식