[12] HTTP : cache-control

- 캐시

캐시는 느린 사용자 경험때문에 조금더 빠른 사용자 경험을 위해 탄생한 개념이다. 만약 클라이언트에서 변경되지 않은 리소스에 대해 서버로 계속 요청한다면 네트워크를 통해서 요청할때마다 데이터를 다운로드 받게된다. 인터넷 네트워크는 비싸고 느리며 브라우저 로딩속도또한 느리기 때문에 비효율적이다. 따라서 변하지 않은 리소스를 미리 브라우저 캐시에 저장해두고 빠르게 로딩하여 사용자 경험을 개선한다.

 

 

1) 클라이언트는 서버에 메세지를 보낸다.

GET /star.jpg

2) 서버는 응답 메세지를 보낸다.

HTTP/1.1 200 OK
Content-Type: image/jpeg
cache-control: max-age=3600
content-length: 34012
...

max-age=3600 은 3600초 동안 유효하다는 뜻이다.

3) 클라이언트는 캐시저장소에 결과를 저장한다.

4) 클라이언트는 다시 요청했을때 유효시간을 검증하고 유효하다면 캐시저장소에서 데이터를 가져온다.

 

 

- 유효시간을 초과했다면?

Last-Modified 를 사용한 예시

1) 클라이언트는 서버에 메세지를 보낸다.

GET /star.jpg

2) 서버는 응답 메세지를 보낸다.

HTTP/1.1 200 OK
Content-Type: image/jpeg
cache-control: max-age=3600
Last-Modified: 2021년 1월 1일 00:00:00 
content-length: 34012
...

Last-Modified를 응답메세지에 추가한다. 최종수정일이라는 뜻이다.

3) 클라이언트는 데이터를 캐시에 저장한다.

4) 클라이언트는 다시 요청할때 캐시유효기간이 만료되었다면 최종 수정일을 바탕으로 서버에게 다음과 같이 메세지를 보낸다.

GET /star.jpg
if-modified-since: 2021년 1월 1일 00:00:00

 

5) 서버는 if-modified-since의 값과 해당 리소스의 최종수정일을 비교하여 일치함을 확인했다. 다음 아래와 같이 메세지를 보낸다.

HTTP/1.1 304 Not Modified
Content-Type: image/jpeg
cache-control: max-age=3600
Last-Modified: 2021년 1월 1일 00:00:00
...

PayLoad는 없이 클라이언트에게 보낸다.

6) 클라이언트는 기존의 데이터의 유효시간을 수정하고 기존 데이터를 사용한다.

 

- Cache-control : no-cache

이름이 no-cache 이지만 캐시를 못하는 것이 아니다.  캐시는 가능하지만 항상 origin 에 검증하고 사용한다.

orgin 서버는 대신 응답해주는 프록시 캐시 서버가 아닌 원래 본연의 서버를 지칭한다. 프록시 캐시 서버를 CDN 서비스라고도 한다.

 

- Cache-control : must-revalidate

캐시 만료후 최초 조회시 origin 에 검증해야한다. origin 서버 접근 실패시 504 Gateway Timeout을 발생시킨다.

no-cache와 차이점은 no-cache는 origin서버에 접근할 수 없는 경우 경우에 따라서 캐시데이터를 반환할 수 있다. 즉, 200 OK 응답을 내보내도록 설정할 수 있지만 must-revalidate는 반드시 오류를 반환한다.

 

 

캐시 무효화를 위한 응답 헤더 ( 어지간하면 아래의 방법으로 브라우저가 데이터를 캐시하는것을 막을 수 있다)

Cache-Control: no-cache,no-store,must-revaludate
Pragma: no-cache