캐시 기본 동작

캐시가 없을 때

• 동작 방식
  1. 브라우저가 필요한 리소스를 서버에 요청한다.
  2. 서버가 응답으로 1.1M 리소스를 전송한다.
  3. 똑같은 리소스가 다시 필요할 경우 서버에 재요청한다.
  4. 서버가 다시 응답으로 1.1M 리소스를 전송한다.
• 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야 한다.
• 인터넷 네트워크는 매우 느리고 비싸다.
• 브라우저 로딩 속도가 느리다.
• 느린 사용자 경험

캐시가 있을 때

• 동작 방식

  1. 브라우저가 필요한 리소스를 서버에 요청한다.

  2. 서버가 응답으로 1.1M 파일과 cache-control을 header에 함께 보낸다.

     • cache-control: 캐시가 유용한 시간(초)

     HTTP/1.1 200 OK
     Content-Type: image/jpeg
     **cache-control: max-age=60**
     Content-Length: 34012
     
     lkj123kljoiasudlkjaweioluywlnfdo912u34ljko98udjkla slkjdfl;qkawj9;o4ruawsldkal;skdjfa;ow9ejkl3123123
     

  3. 브라우저 캐시에 응답으로 온 리소스가 저장된다.

  4. 똑같은 리소스가 다시 필요할 경우, 브라우저가 캐시에서 캐시 유효 시간을 검증한다.

  5. 유효하면 캐시에서 리소스를 가져온다.

• 캐시 덕분에 캐시 가능 시간동안 네트워크를 사용하지 않아도 된다.
• 비싼 네트워크 사용량을 줄일 수 있다.
• 브라우저 로딩 속도가 매우 빠르다.
• 빠른 사용자 경험

캐시 시간이 초과됐을 때

• 캐시 시간이 초과되었다고 캐시에서 데이터가 삭제되는 것은 아니다.
• 서버에 새로 요청할 때 두가지 경우가 있다.
  1. 서버에 기존 데이터가 변경되었다.
  2. 서버에 기존 데이터가 이전과 같다.
• 1번의 경우 재요청을 하여 응답으로 받은 리소스를 캐시에 업로드 해야한다.
• 2번의 경우 기존의 데이터와 같다면 똑같은 파일을 또 받는 것은 낭비이다.
  • 새로 요청하지 안혹 기존에 캐시를 이용할 수 있다.
  • 그러나, 클라이언트의 데이터와 서버의 데이터가 같다는 사실을 확인할 수 있는 방법이 필요하다.

검증 헤더와 조건부 요청