[network] - (8) HTTP 헤더2 : 캐시와 조건부 요청

[캐시 기본 동작]

웹브라우저에서 요청하면 서버에서 총 1.1M네트워크 카지하면서  웹브라우저에 내려보내

웹브라우저에 이미지 표시됨

서버에서 또 똑가은 응답을 받아서 내려주는데 헤더와 바디부를 다시 만들어서 내려보냄

• 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야 됨
• 인터넷 네트워크는 매우 느리고 비쌈
• 브라우저 로딩 속도가 느림

---

 

서버에서 이시간동안은 캐시가 유효하다는

최초 요청시 웹브라우저 내부의 캐시 저장소에 응답결과를 캐시에 저장

두번째 요청시에는 캐시를 먼저 뒤져서 캐시에서 바로 가져와

캐시에서 바로 가져와. 네트워크를 탈 필요가 없어

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

---

 

60초가 초과되면 다시 요청해야됨. 서버에서 똑같은 메세지 내려줘

받은 캐시 데이터를 기존꺼 지우고 다시 캐시 덮어씌워. 캐시 초기화

캐시 유효 시간이 초과하면, 서버를 통해 데이터를 다시 조회하고, 캐시를 갱신. 다시 네트워크 다운로드가 발생

 

---

캐시 유효 시간 초과해서 서버에 다시 요청하면
1. 서버에서 기존 데이터를 변경함

2. 서버에서 기존 데이터를 변경하지 않음->다시 받기 아까워
->[검증헤더와 조건부 요청]
캐시 만료후에도 서버에서 데이터를 변경하지 않으면 데이터를 전송하는 대신에 저장해 두었던 캐시를 재사용 할 수 있음. 단 클라이언트의 데이터와 서버의 데이터가 같다는 사실을 확인할 수 있는 방법 필요

이 데이터의 최종 수정일을 넣어줘서 응답을 내려주면

응답결과를 캐시에 저장

---

웹브라우저가 서버에 요청을 보낼 때 if-modified-since라는 http요청헤더를 붙여서 서버에 넘기면

데이터가 수정이 안됐으면

HTTP응답을 만들 때 응답에 304보내서 (변경된게 없다!)수정된게 없어서 http바디가 없어 빼고 보내. 헤더만 보내(0.1M만보내)

 

캐시 유효 시간이 초과해도, 서버의 데이터가 갱신되지 않으면 304 Not Modified + 헤더 메타 정보만 응답(바디X)
클라이언트는 서버가 보낸 응답 헤더 정보로 캐시의 메타 정보를 갱신,

캐시에 저장되어 있는 데이터 재활용
=>네트워크 다운로드가 발생하지만 용량이 적은 헤더 정보만 다운로드

 

검증헤어 : Last Modified

조건부 요청 : if-modified-since

 

---

[검증헤더와 조건부 요청]
1. 검증 헤더
• 캐시 데이터와 서버 데이터가 같은지 검증하는 데이터
• Last-Modified , ETag

2. 조건부 요청 헤더

• 검증 헤더로 조건에 따른 분기
• If-Modified-Since: Last-Modified 사용
• If-None-Match: ETag 사용
• 조건이 만족하면 200 OK
• 조건이 만족하지 않으면 304 Not Modified


If-Modified-Since : 이후에 수정됐으면
데이터 미변경 예시
• 캐시: 2020년 11월 10일 vs 서버: 2020년 11월 10일 동일해.

     변경이 안일어났으니 304(너의 캐시로 리다이렉션해라), 헤더 데이터만 전송(BODY 미포함)
     전송 용량 0.1M (헤더 0.1M, 바디 1.0M)
     데이터 변경 예시
• 캐시: 2020년 11월 10일 vs 서버: 2020년 11월 10일 수정이 됐으니까

     200 OK, 모든 데이터 전송(BODY 포함)
     전송 용량 1.1M (헤더 0.1M, 바디 1.0M)

1초미만단위는 캐시 조정 불가능, 날짜 기반의 로직이여서 전체 데이처를 다시 다운로드해,주석은 그냥 신경안쓰고 싶어

 

---

 

==>[ETag]
캐시용 데이터에 임의의 고유한 버전 이름을 달아둠 ex) ETag: "v1.0", ETag: "a2jiodwjekjl3"
데이터가 변경되면 이 이름을 바꾸어서 변경함(Hash를 다시 생성) ex) ETag: "aaaaa" -> ETag: "bbbbb"
진짜 단순하게 ETag만 보내서 같으면 유지, 다르면 다시 받기!

ETag를 저장

단순하게 ETag만 서버에 보내서 같으면 유지, 다르면 다시 받기. 캐시 제어 로직을 서버에서 완전히 관리

 

---

 

[캐시 제어 헤더] 응답코드에 다음과 같이 있으면..
1. Cache-Control: 캐시 제어
    • Cache-Control: max-age 캐시 유효 시간, 초 단위
    • Cache-Control: no-cache 데이터는 캐시해도 되지만, 항상 오리진 서버에 검증하고 사용
    • Cache-Control: no-store 데이터에 민감한 정보가 있으므로 저장하면 안됨 (메모리에서 사용하고 최대한 빨리 삭제)
2. Pragma: 캐시 제어(하위 호환)
3.Expires: 캐시 만료일을 정확히 날짜로 지정 가능

 

[조건부 요청 헤더]
If-Match, If-None-Match: ETag 사용
If-Modified-Since, If-Unmodified-Since: Last-Modified 사용

 

---

 

[프록시 캐시]

멀리 있는 서버는 오래 걸리니까 요청이 오면 웹브라우저가 직접 접근이 아니라 프록시 캐시 서버에 접근하도록

 

---

[캐시 무효화]

   이런 화면은 캐시화되면 절대 안돼! 이런경우에 사용
1. Cache-Control: no-cache, no-store, must-revalidate 다 넣어줘
2. Pragma: no-cache

노캐시로 보냈는데 원서버에 접근이 불가하면 프록시캐시가 오래된 데이터라도 보여주겠다하면 200으로 보내.

 

노캐시로 보냈는데 원서버에 접근이 불가하면 프록시캐시가 504를 보내. 통장잔고 같은거