HTTP Cache

Build Up

Why

• 웹 브라우저에 사진, 영상, 텍스트 등 각각은 네트워크를 통해 전송되어서 브라우저에 도착해 화면에 그려줍니다.

• 해당 과정에서 서버에서 받아야할 리소스들이 더욱더 많아진다면, 페이지 로딩 즉 우리가 보이는 화면이 느려지게 되고 이러한 부분이 사용자 서비스 이탈율을 증가시킬 수 있습니다. 결국 느린 사용자 경험을 제공하는 것입니다.

• 이런 문제를 해결하기 위해 캐시를 적절히 사용한다면 네트워크에 전송되는 데이터 양을 절약하고 꼭 필요한 데이터 전송에만 쓸 수 있습니다. 와이파이가 아닌 스마트폰 셀룰러라면 해당 데이터의 송수신으로 인해 사용자들이 사용량이 많아지게 되면서 사용량만 축내는.. 안좋은 웹 서비스가 될 수 있습니다.

What & How

Browser

• http에서는 header에 cache-control이라는 지시어를 사용하여 캐시를 사용합니다.
1. max-age: ${time}
• 일정 시간동안 원서버에 요청하지 않고 응답된 것을 캐시하여 사용한다는 의미입니다.

유효시간이 만료되면 다시 원서버로 요청을 하고 네트워크 다운로드가 발생하게 됩니다.
만약 원서버로 부터 똑같은 데이터를 받을 수 있는 경우가 있을 수 있게 되는데 시간에만 너무 의존적이게 됩니다. 이러한 부문을 해결하기 위해는 다음 last-modified 헤더를 이용할 수 있습니다.
2. last-modified (검증헤더)
• 마지막으로 변경된 시간으로 표현되며 캐시 시간 max-age 만료후 우선 last-modified의 조건부 헤더를 추가해 이전에 받은 last-modified 날짜와 비교를 하고 같다면 304 코드를 반환하고 body없이 응답하게 되면서 통신 자체는 발생하지만 전송량을 절약하는 효과를 얻을 수 있습니다
• 조건 헤더: last-modified-since







단점
• 1초 미만 단위로 캐시 조정이 불가능하다는 단점이 있습니다.
• A→ B → A로 변경될 때 대상 자체가 달라지므로 A→B, B→A로 변경이 일어나면서 다운로드를 2회 수행하게 됩니다.
• 전체 적으로 봤을 때 결국 A임에도 불구하고도 불필요한 전송량을 낭비하고 있습니다.
• 해당 부문을 해결할 수 있는 것이 바로 Etag입니다.
 
3. Etag (검증 헤더)
• 일정한 고유 값인 해시값 형태를 가지며 고유한 버전 이름을 가지고 있습니다.
• 예를 들어 ETag: "aaaaa"라고 달아두고, 데이터가 변경되면 이 이름을 바꿔서 변경(Hash 재생성)합니다. 예를 들어 ETag: 'aaaaa'에서 ETag: 'bbbbb'로 변경합니다. 만약 ETag가 같으면 캐시를 유지하고, 다르면 다시 받는 것입니다.



• 캐시 시간이 초과되면 ETage를 서버에 전달합니다. 같으면 304코드와 빈 Body를 새로운 Etag이면 네트워크를 통해 다운로드를 받습니다.



 
지금 까지 브라우저단 즉 사용자단의 캐시 활용방안에 대해 알아보았습니다. 이 외로 cache-control 지시어에 다른 속성들또한 있습니다.
기타 속성값
1. no-cache: 캐시는 해도 되지만 항상 원서버로 검증하겠다 라는 것입니다.
2. no-store: 민감 정보가 있으므로 저장하면 안돼! 라는 의미를 가진 속성 값입니다.

Proxy

1. Cache-Control: public응답이 public 캐시에 저장되어도 됩니다. 여기서 public 캐시라는 것은 프록시 캐시 서버에 저장한다는 뜻입니다.

2. Cache-Control: private응답이 해당 사용자만을 위한 것이라는 뜻입니다. 즉 사용자의 웹 브라우저에 저장되어야 한다는 뜻입니다.

3. Cache-Control: s-maxage프록시 캐시에만 적용되는 max-age입니다.

캐시 무효화

• 캐시는 실시간적으로 변화가 많은 부분에는 적용해선 안됩니다. 왜냐하면 불특정 다수가 서로 다른 정보를 보게되고 공정성을 잃게 되며 안좋은 사용자 경험이 될 수 있기 때문입니다. 그렇기 때문에 해당 부분을 무효화 하기 위한 방법 또한 알고 있어야 합니다.

• 둘다 원서버로 부터 검증해야 하는 것은 동일하지만

• no-chache는 만약 원서버로 부터 504가 발생하면 캐시된 것이라도 보여주고 revalidate는 504를 클라이언트에게 전달합니다.

 REFER

[HTTP] HTTP Cache - 프로세스와 기본 헤더

안녕하세요. 오늘 여러분들에게 소개해드릴 내용는 HTTP의 Cache 프로세스와 관련된 기본 헤더들입니다. 웹사이트를 통해 이미지 , js, html 파일 등의 데이터를 가지고 올 때 해당 데이터의 크기만큼의 통신 데이터 처리가 필요합니다. 동일한 이미지를 접속할 때 마다 받아온다면 클라이언트 입장에서도 부담이며 여러 클라이언트를 동시에 상대하는 서버에는 더더욱 부담이 될 것입니다. 이렇게 때문에 HTTP에서는 캐싱(caching)를 지원하고 있습니다. 오늘은 HTTP Cache의 종류와 그 과정에 대해서 알아보는 시간을 가져보도록 하겠습니다. HTTP 캐싱 캐싱은 크게 두가지의 종류가 있습니다. 사설(private) 캐시와 공유(shared) 캐시입니다. 사설 캐시는 각 Client의 로컬 캐시에 데이..

https://sabarada.tistory.com/143?category=800100

모든 개발자를 위한 HTTP 웹 기본 지식 | 김영한 - 인프런

김영한 | 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., [사진] 📣 확인해주세요!본 강의는 자바 스프링 완전 정복 시리즈의 세 번째 강의입니다. 우아한형제들 최연소 기술이사 김영한의 스프링 완전 정복 로드맵을 먼저 확인해주세요...

https://www.inflearn.com/course/http-웹-네트워크

웹 서비스 캐시 똑똑하게 다루기

웹 성능을 위해 꼭 필요한 캐시, 제대로 설정하기 쉽지 않습니다. 토스 프론트엔드 챕터에서 올바르게 캐시를 설정하기 위한 노하우를 공유합니다.

https://toss.tech/article/smart-web-service-cache

HTTP Cache로 불필요한 네트워크 요청 줄이기

https://yceffort.kr

https://yceffort.kr/2020/10/http-cache

[네트워크] HTTP Cache 이해하기

들어가며 개발자가 되기 위해서는 정말 다양한 지식을 알아야 합니다. 그중에서도, 네트워크는 필수적으로 알아야 하는 분야라고 생각했지만, 막상 네트워크를 제대로 공부한 적은 드물었습니다. 이번 기회에 네트워크에 대해 조금씩이라도 공부하면서 개발자로서의 기본을 쌓기 위해 노력하고 싶습니다. 이 글은 인프런 - 모든 개발자를 위한 HTTP 웹 기본 지식(김영한) 강의를 보고 공부한 내용입니다. 자세한 내용은 강의를 참고해주세요. 캐시 캐시가 없다면, 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드하여야 합니다. 하지만 인터넷 네트워크는 매우 느리고 비싸며, 브라우저 로딩 속도 또한 느립니다. 이 상황에서 서버에서 받아야 할 리소스가 많아진다면, 서버와 브라우저 사이에서 라운드 트립이 많아질 ..

https://overcome-the-limits.tistory.com/418