[네트워크] HTTP 헤더 - 캐시와 조건부 요청

캐시 기본 동작

기본적으로 웹 브라우저가 서버에게 요청을 하면 서버는 해당 정보를 모두 준다.

여기서는 1.1M 용량을 클라이언트에게 전송했다.

 

만약 두번째 요청을 한다면?

마찬가지로 서버는 1.1M용량의 별 사진을 보낼 것이다.

 

이렇게 하면 브라우저 로딩 속도 저하, 비용문제 등등이 발생한다.

따라서 캐시 컨트롤을 통해서 캐시를 적용하면 브라우저 캐시에 해당 정보가 저장된다.

그러면 사용자가 60초 내에 다시 요청을 하게되면 서버에 요청을 하여 데이터를 얻는 것이 아니라, 브라우저 캐시를 통해서 얻게 된다.

 

만약 60초가 초과된다면? 다시 서버에 요청을 하게된다.

이때 별 사진에 업데이트 된 내용이 없더라도 다시 네트워크 다운로드가 발생한다. 

 

검증 헤더와 조건부 요청

만약 2번의 경우라면? 다시 요청해서 모든 정보를 받아오는건 낭비이다.

따라서 데이터가 변경되었는지 확인하는 로직이 필요하다.

 

위 경우가 해당 로직이다.

만약 캐시가 만료되면 브라우저는 if-modified-since 태그로 현재 캐시에 있는 데이터를 받을 당시에 있던 최종수정일을 보낸다.

 

만약 서버가 보았을 때 해당 리소스의 최종 수정일이 받은 최종수정일과 같다면 304 코드의 응답을 보낸다.

이때 응답에는 body가 없다.

 

그러면 브라우저는 다시 캐시의 유효기간을 업데이트하고, 데이터는 캐시에서 가져오게 된다.

 

검증헤더

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

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

-> 200ok, 모든 데이터를 전송한다

 

하지만 이렇게 하면 a->b->a로 수정되어 최근 수정된 날짜는 갱신되었지만, 결과가 같은 경우를 거를 수 가 없다.

 

ETag

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

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

위에서는 ETag가 일치하므로, 304 코드가 담긴 메세지를 보낸다

 

이 로직은 캐시 제어 로직을 서버에서 완전히 관리한다.

클라이언트는 단순히 이 값을 서버에 제공한다.(캐시 메커니즘은 전혀 모르는 상태)

 

캐시와 조건부 요청 헤더

Cache-Control

Cache - Control : max-age

캐시 유효 시간, 초 단위

 

Cache - Control : no-cache

데이터는 캐시해도 되지만, 항상 원(origin)서버에 검증하고 사용

 

Cache - Control : no-store

민감한 정보이므로 저장하면 안됨

 

Pragma, Expires(만료일) 등도 있는데 이들은 하위호환이다.

 

 

프록시 캐시

이렇게 그때그때 한국에 있는 클라이언트가 미국에 있는 원서버에 요청을 하면 오래걸린다.

 

따라서 우리는 한국에 있는 프록시 서버를 두고, 미국 원 서버에 접속할 때 이를 거치도록 한다.

그래서 우리가 한국 사람들이 자주 보는 유튜브를 볼 때 원활하게 볼 수 있는 것이다.

외국의 마이너한 개발 채널을 보면 좀 버벅거린다..

 

이때

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

Cache - Control : private - 응답이 해당 사용자만을 위한 것이라 private 캐시에 저장되어야한다.

 

캐시 무효화

통장잔고 등과 같은 민감한 정보는 캐시를 사용하면 안된다

따라서 이렇게 설정해주어야한다.

 

no - cache : 데이터는 캐시해도 되지만, 항상 원 서버에 검증하고 사용

no - store : 데이터에 민감한 정보가 있으므로 저장하면 안됨

must - revalidate : 캐시 만료 후 최초 조회 시 원 서버에 검증해야한다. 만약 원 서버에 접근하지 못하면 504오류 발생시켜야함

 

no -cache에서는 프록시캐시에서 원 서버에 검증을 하려고 할 때 접근이 불가하면 원래 프록시캐시에 있던 데이터를 보여준다.

 

이를 방지하려면 must - revalidate를 사용하면 된다.

이 경우에는 프록시캐시가 원 서버에 접근할 수 없을 때 504 에러를 발생시킨다.

 

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

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