[TIL] 캐시 & 검증헤더와 조건부 요청

 

🤓배움 요약하기

캐시가 무엇인가요? 
나중에 요청할 결과를 미리 저장해둔 후 빠르게 서비스 해주는 것을 말합니다. 
캐시 덕분에 비싼 네트워크 사용량을 줄일 수 있고 브라우저 로딩 속도가 빠르기 때문에 빠른 사용자 경험이 가능하다는 장점이 있습니다. 

검증 헤더와 조건부 헤더이란?
검증헤더와 조건부 요청을 사용하면 캐시 유효 시간이 초과해도 서버의 데이터가 갱신되지 않으면 304 Not Modified와 함께 헤더만 응답해서 네트워크 다운로드가 아주 적게 발생해서 캐시보다 매우 효율적으로 데이터를 전송할 수 있습니다. 

 

✔️ 캐시가 없다면?

데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야 한다. 

인터넷 네트워크는 느리고 비싸기 때문에 웹 개발자라면 신경을 써야한다. 

느린 사용자 경험

 

✔️ 캐시의 기본동작

cache-control:max-age=60 (초)

헤더에 캐시가 유효한 시간(초)를 설정할 수 있다. 그러면 웹 브라우저 캐시에 응답 결과를 캐시에 저장한다. 

두 번째 요청에서 똑같은 요청을 한다면 캐시 유효 시간을 검증해서 캐시에서 가져다가 쓴다. 

 

만약 캐시 유효 시간이 초과되었다면 서버를 통해 데이터를 다시 조회하고 캐시를 갱신한다. 

 

✔️ 캐시의 장점

캐시 덕분에 비싼 네트워크 사용량을 줄일 수 있다. 

브라우저 로딩 속도가 빠르다. 

빠른 사용자 경험

 

---

✔️ 캐시를 보완한 검증헤더와 조건부 요청

클라이언트가 가진 데이터와 서버가 가진 데이터가 똑같아도 캐시가 만료되면 다시 다운을 받아야한다??

이걸 해결하기 위해서 나온 것이 바로 검증헤더와 조건부 요청

클라이언트 데이터와 서버의 데이터가 같다는 것을 확인하고 저장해 두었던 캐시를 재사용하자!

 

서버에서 헤더에 Last-Modified를 추가하고, 클라이언트가 또다른 요청에서 헤더에 if-modified-since를 보낸다. 

서버는 Last-Modified 값을 비교해서 데이터가 수정되지 않았다면 304 Not Modified와 함께 헤더만 보낸다. (바디는 전송X)

 

웹 브라우저 캐시는 응답 결과를 재사용해서 데이터를 갱신한다. 그리고 클라이언트는 캐시에서 데이터를 불러와서 쓰게 된다. 

 

=> 정리) 검증헤더와 조건부 요청을 사용하면 캐시 유효 시간이 초과해도 서버의 데이터가 갱신되지 않으면 304 Not Modified와 함께 헤더만 응답해서 네트워크 다운로드가 아주 적게 발생한다. 

---

✔️ 검증 헤더와 조건부 요청 종류

검증 헤더

1. Last-Modified

2. ETag(캐시용 데이터에 임의의 고유한 버전 이름을 달아두는데, 데이터가 변경되면 이름을 바꿔서 변경함. Hash 다시 생성)

 

조건부 요청 헤더

→ If-Modified-Since : Last-Modified 사용

→ If-None-Match : ETag 사용

조건이 만족하면 200OK (모든 데이터 전송 BODY 포함)

조건이 만족하지 않으면 Not Modified (헤더 데이터만 전송 BODY 미포함)

---

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓