HTTP(7) - HTTP 헤더 (캐시 검증헤더와 조건부 요청)

캐시 기본 동작

 

웹 사이트에서 사진을 요청한다고 가정하면 헤더와 바디 부분을 서버가 만들어서 클라이언트에 보내줄 것이다.

캐시가 없을 때 웹 사이트를 들어가면 같은 용량의 사진 파일을 똑같이 보내줘야 한다.

 

캐시가 없으면

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

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

 

 

캐시 적용

 

첫 번째 요청

HTTP/1.1 200 OK

Content-Type: image/jpeg

cache-control: max-age=60   //   캐시가 유효한 시간

Content-Length: 34012

 

60초 동안은 브라우저 캐시에 정보를 저장

 

두 번째 요청

서버 네트워크를 탈 필요 없이 캐시에 저장되어 있으면 캐시에서 꺼내서 확인하게 됨

 

세 번째 요청

60초가 초과되면 서버에 다시 요청을 해야한다.

- 변하지 않는 데이터를 다시 다운로드 받아야하기에 좋지 않음

 

 

검증헤더와 조건부 요청

캐시 만료 후에도 서버에서 데이터가 변경되지 않았다면 캐시에서 다시 다운받으면 된다.

하지만 서버에서 데이터가 변경되지 않았다는 사실이 확인되어야하기 때문에 검증헤더라는 조건이 필요하다.

 

HTTP/1.1 200 OK

Content-Type: image/jpeg

cache-control: max-age=60   //   캐시가 유효한 시간

Last-Modified: 2023년 2월 7일 13:00:00    //   마지막으로 변경된 시간

//  알아보기 편하게 한글로 적은거고 원래는 지정된 표기법으로 적어야함

Content-Length: 34012

 

캐시에 응답 결과와 유효시간을 저장하고 추가적으로 데이터 최종 수정일도 저장한다.

 

클라이언트가 두 번째 요청을 하고 캐시 시간이 초과됐다고 가정해보자.

 

클라이언트 요청

GET /star.jpg

if-modified-since: 2023년 2월 7일 13:00:00

 

클라이언트가 요청을 할 때 데이터 최종 수정일을 서버에 같이 요청하고 검증을 해서 최종 수정 날짜가 똑같아서 변경된 데이터가 없을 시

 

서버가 클라이언트에

HTTP/1.1 304 Not Modified

Content-Type: image/jpeg

cache-control: max-age=60

Last-Modified: 2023년 2월 7일 13:00:00

Content-Length: 34012

 

라고 반환하고 HTTP Body를 보내지 않는다.

헤더가 바디보다 데이터 용량이 훨씬 작기 때문에 Body를 같이 보내지않고 변경이 되지 않았다는 헤더만 보내게 된다.

클라이언트 웹 브라우저는 서버에서 보낸 작은 헤더를 통해 서버가 아닌 캐시에서 데이터를 꺼내서 보게 된다.

 

Last-Modified: 2023년 2월 7일 13:00:00 -> 검증헤더

if-modified-since: 2023년 2월 7일 13:00:00 -> 조건부 요청

 

네트워크 다운로드가 발생하기는 하지만 굉장히 용량이 적은 헤더 정보만 다운로드하기 때문에 매우 실용적인 해결책이다.

 

 

검증 헤더

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

- Last-Modified와 ETag가 있다.

 

조건부 요청 헤더

- If-Modified-Since: Last-Modified와 같이 사용

- If-None-Match: Etag와 같이 사용

- 조건이 만족하면 200 OK

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

 

 

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

데이터가 변경되지 않았으면 위와 같이 헤더만 전송

 

데이터가 추가로 갱신되어서 변경되었다면

200 OK, 모든 데이터 전송(Body 포함)

전송 용량 헤더 + 바디

 

 

 

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

- 날짜 기반의 정해진 로직 사용

- 데이터를 수정해서 날짜가 다르지만, 같은 데이터를 수정해서 데이터 결과가 똑같은 경우에도 전체 데이터를 다시 받음

 

ETag, If-None-Match

- ETag : 캐시용 데이터에 임의의 고유한 버전 이름을 달아둠

   예) ETag: "v1.0", ETag: "a2jiodwjekjl3"

- 데이터가 변경되면 이 이름을 바꾸어서 변경함(Hash를 다시 생성)

   예) ETag: "aaaa" -> ETag: "bbbb"

- 단순하게 ETag만 보내서 같으면 유지, 다르면 다시 받음

 

 

ETag를 이용한 첫 번째 요청

 

HTTP/1.1 304 Not Modified

Content-Type: image/jpeg

cache-control: max-age=60

ETag "aaaaaa"  // ETag 값을 저장

Content-Length: 34012

 

두 번째 요청

 

GET /star.jpg

If-None-Match: "aaaaaa" 

 

변경되지 않았으면

HTTP/1.1 304 Not Modified

Content-Type: image/jpeg

cache-control: max-age=60

ETage: "aaaaaa"

Content-Length: 34012

 

역시 HTTP Body는 받지 않고 캐시 데이터를 재활용해서 사용한다.