✴️ 캐시 기본 동작
캐시가 웹 브라우저에서 어떻게 동작하는지 알아보자!
💰😵 캐시가 없을 때
예를 들어 클라이언트가 서버에게 star.jpg 이미지에 대해 GET 요청을 보냈다고 가정해보자. 서버가 이에 대한 응답을 내려줄 때 HTTP 헤더에 대한 용량이 0.1M, HTTP 바디에 대한 용량이 1.0M를 차지한다고 해보자. 서버는 총 1.1M의 네트워크를 차지하며 클라이언트에게 이미지를 응답하게 된다.
첫 번째 요청과 같은 요청을 다시 서버에게 보냈을 때, 서버는 이전과 동일하게 1.1M의 네트워크를 사용하며 클라이언트에게 이미지를 응답한다.
정리하자면, 캐시를 사용하지 않았을 때!
- 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야 한다.
- 인터넷 네트워크는 매우 느리고 비싸다.
- 브라우저 로딩 속도가 느리기 때문에, 느린 사용자 경험을 제공하게 된다.
💰👌🏻 캐시가 있을 때 
캐시를 적용할 때는 HTTP 헤더에서 cache-control 헤더를 사용해, 캐시의 유효 시간을 초 단위로 설정한다. 이때 설정한 시간 동안 캐싱된 요청에 대해서는 동일한 응답이 제공되며, 리소스를 다운받기 위한 네트워크 사용이 필요하지 않다.
웹 브라우저는 브라우저 캐시라는 캐시 저장소를 가지고 있다.
리소스 다운로드 시 캐시 저장소에 리소스를 유효 시간만큼 보관하고 있으며, 만료되기 전까지는 보관하고 있는 리소스에 대해 요청이 발생했을 때 제공하는 역할을 한다.
요청이 들어왔을 때 웹 브라우저는 먼저 요청된 자원에 대해 브라우저 캐시에서 설정된 유효 시간을 체크하고, 자원이 있는지 점검한다. 유효 시간이 남아있고 캐싱된 자원이 존재할 경우 브라우저 캐시에서 바로 자원을 가져오고, 그렇지 않을 경우 서버에 요청을 전달한다.
캐시를 사용했을 때!
- 캐시 덕분에 캐시 가능 시간 동안 네트워크를 사용하지 않아도 된다.
- 비싼 네트워크 사용량을 줄일 수 있다.
- 브라우저 로딩 속도가 매우 빠르므로, 빠른 사용자 경험을 제공한다.
💰⌛️ 캐시 유효 시간이 초과됐을 때
브라우저가 보낸 요청에 대해 브라우저 캐시를 점검했을 때 캐시 유효 시간이 초과됐을 경우에 브라우저는 어떻게 대처할까?
브라우저가 캐시를 사용할 수 없으므로 요청을 서버에 보내 다시 데이터 조회를 시도하고, 서버는 사용자의 요청에 대한 응답을 제공하며 네트워크 다운로드를 사용하게 된다.
그리고 브라우저는 서버로부터 받은 응답 결과를 다시 캐시에 저장하고 유효시간을 설정한다.
🤔 캐시 유효 시간이 지나서 갱신을 했지만, 서버로부터 받는 데이터가 동일하다면?
네트워크 다운로드를 사용하는 것이 낭비일 것이다!
이를 위해 다음 편에서는 "검증 헤더와 조건부 요청"에 대해 공부해보겠다 ~!
Reference
