[HTTP✨] 캐쉬헤더

해당 포스팅은 HTTP 캐쉬가 도입된 목적과 헤더를 통해 캐쉬 동작을 제어하는 방법에 대해 다룹니다.

캐시가 도입된 이유

인터넷의 팽창 이후 http 전송 속도를 높이기 위해 도입했습니다. 사이트를 방문할 때마다 매번 같은 파일을 받는 건 비효율적입니다. 자주 사용하는 파일은 사용자 측 브라우저에 저장하고 재사용한다면 효율이 더 좋겠죠. 그래서 나온 기술이 바로 캐시입니다.

캐시의 장점은 네트워크를 사용하지 않으면 일단 지연이 발생하지 않고 비용도 감소한다는 점입니다. 반면에 단점도 존재합니다. 캐시를 사용하고 있다면, 우리 웹사이트가 개편이 됐더라도 사용자는 이전의 사이트를 보고 있을 수 있습니다. 최신 상태를 계속 유지하는 웹의 장점을 그대로 사용하기 위해서는 섬세한 조정이 필요합니다.

웹 사이트 일부러 느리게 로딩하는 법은?

개발자도구 → 네트워크 탭 → preset 중 slow 3G를 선택하고 새로고침한다.

캐시 컨트롤 헤더 옵션은?

저장

Cache-Control: no-store

 no-cache, no-store, must-revalidate 등이 있다.

만료

Cache-Control: max-age=3153010 뒤에 있는 숫자는 초 단위이다.

캐시 지우고 새로고침 하는 방법은?

개발할 때 네트워크 캐시에 관련된 설정을 고치고 싶은데 계속 캐시가 남아서 곤란한 경우가 있습다. 이럴 때는 크롬 브라우저에 내장된 강력 새로고침(Hard Reload) 기능을 사용하면 해결할 수 있습니다. 해당 방법을 사용하면 캐시를 없앤 상태로 새로고침합니다. 단축키는 Ctrl+Shift+R 이다

캐시의 단점은?

컨텐츠 신선도가 떨어집니다. 개발자가 사이트를 변경해도 사용자 PC에 캐시가 저장되어 있기 때문에 새로운 정보를 확인하지 못합니다.

캐시의 단점 해결법은?

Cache-Control: max-age의 값을 적절히 조정하거나 Cache-Control “no-cache” 옵션을 사용합니다.

클라이언트 → 서버 : 내 캐시에 저장된 이미지 파일 최근 컨텐츠야?

서버 → 클라이언트 : 응 최근꺼야

위는 캐시된 파일이 최신 컨텐츠인 상황입니다.

위와 같은 형식으로 클라이언트가 서버에게 확인하고 서버는 확인 결과를 보냅니다. 이때 Last-Modified 옵션의 값을 확인합니다. 만약 클라이언트 요청 if-Modified-Since 값과 서버 반환인 Last-Modified 값이 서로 일치한다면 캐시된 파일이 최신 파일이라는 뜻입니다. 동시에 이때 304 not modified의 뜻을 가진 상태 코드도 반환합니다.

클라이언트 → 서버 : 내 캐시 파일 최근 컨텐츠야?

서버 → 클라이언트 : 아니 최근에 변경됐어 (이미지파일) 이거 받아

위는 캐시된 파일이 오래된 컨텐츠인 상황입니다.

서버는 응답과 함께 컨텐츠도 반환합니다. 만약 max-age=5 로 설정한다면 마지막으로 요청한 시간이 5초가 지나면 다시 이런 방식으로 클라이언트가 서버에 캐시가 최신 파일인지 요청합니다. 만약 max-age=0 이라면 매번 페이지를 불러올때마다 클라이언트에서 서버로 확인합니다. Cache-Control “no-cache” 와 동일한 기능을 합니다.

Etag란?

Last-Modified 옵션으로 최신 상태를 확인하는 건 정확하지 않을 수 있습니다. 하나의 값만 가지고 확인하는 건 불안 요소가 따르기 때문에 이를 해결하기 위해 등장한 것이 ETag입니다.

ETag는 Http 헤더로 Last-Modified와 마찬가지로 캐시를 쓸 때 사용하는 옵션입니다. 만약 클라이언트가 서버에게 처음으로 이미지 파일을 요청하면 ETag와 Last-Modified 값을 응답합니다. 그러면 클라이언트는 해당 값을 보관했다가 IF-Modified-Sicne(마지막 수정) 와 If-None-Match(Etag) 값을 넣어 요청합니다.

 

---

참조

생활코딩-HTTP Cache 강의