[ 용어 ] HTTP cache - 프론트엔드 캐싱

1. HTTP cache

캐시는 데이터를 저장하는 임시저장소

데이터, 값 등을 미리 복사해두는 임시저장소

 

2. cache 최적화

브라우저에서의 캐싱이란 두 방식으로 나뉘는 데, 둘 중 어느 방식으로 사용하는 지에 대한 판단은 개발자가 할 수 있는 것이 아닌 파일 사이즈에 따라 브라우저 자체의 알고리즘으로 결정된다.

 

- 디스크 캐시 : RAM에 데이터를 저장해두고 읽는 방식

- 메모리 캐시 : 파일에 데이터를 저장해두고 읽는 방식

 

3. cache를 해야하는 이유

서버에서 브라우저가 데이터를 받아올 때, 이미 브라우저에서 다운받은 것을 또 받는 다고 한다면 동일 파일의 다운로드는 리소스 낭비가 될 수 있다. 이러한 리소스의 낭비를 줄이기 위해 이미 브라우저에서 다운받은 데이터와 같은 데이터를 다운받으려고 하는 경우, 새로 다운받지 않고, 기존에 다운받았던 데이터를 사용하는 것이 더 효율적이다.

 

4. 캐싱하는 방법

디스크 캐시와 메모리 캐시 중 선택해서 브라우저가 알아서 처리하는 것이기 때문에 개발자가 할 수 있는 캐싱은 특정 데이터에 대해서 캐싱을 할 것인가, 아니면 캐싱을 하지않을 것인가를 정하고 캐싱을 한다면 캐싱하는 기간을 어느 정도로 설정할 것인지 등이 있다. 

 

request를 받은 서버는 response의 유효기간을 정할 수 있다.

Cache-Control : 클라이언트에 어떻게 캐싱할지를 지정

• no-cache : 캐시를 사용하기 전에 서버 검사 후 결정한다. - 캐싱을 사용하지 않는 다는 의미가 아님!
  캐싱을 하지않을 것 같은 이름이나 실제로는 계속해서 서버로 이 데이터가 최신인지 확인한 후, 최신이라 다시 다운로드받고 그렇지 않다면 캐싱된 데이터를 쓰도록 하는 옵션.
  캐싱할 데이터는 최대한 static한 데이터 ( 변동 가능성이 낮은 )를 하는 것이 좋은 데, no-cache 옵션의 경우 끊임없이 변동성을 체크해야하는 대상에 주로 사용한다.
• no-store : 캐시 사용 X
• public : 모든 환경에서 캐시를 사용 가능하다는 것.
  프론트엔드와 백엔드와 api 소통하는 과정에 CDN 등을 사용하면 다양한 중간 매개체가 생기게 되는 데, 이 중간 매개체에서도 캐시를 허용한다는 것을 의미.
• private : public과는 달리 중간 매개체는 허용하지 않고 오직 브라우저 환경에서만 캐시를 사용하도록 허용한다. 외부 캐시 서버에서는 사용할 수 없도록 하는 옵션이다.
• max-age : 초 단위의 캐시 유효 시간 ( max-age=0 === no-cache )
  max-age가 지나도 서버는 캐시를 여전히 가지고는 있고, "얘 만료되었는 데?"라고 물어본다.

* 백엔드로 api header에 아래와 같은 형태로 전달한다.

Cache-Control : private, max-age=60

 

* max-age=0 으로 설정하면 모든 서버(public)에서 캐시의 유효기간을 0초 단위로 세탕하는 것으로 매번 현재 캐싱된 데이터가 최신인지 확인한다는 것이다. 결과적으로는 no-cache 옵션과 같은 기능을 한다고 생각하면 된다.

Cache-Control : public, max-age=0

 

 

---

 

Cache 검증

캐시를 읽음 → 유효기간이 지남 → 사용해도 되는 지 재검증 요청을 서버에게 보냄.

1. Last-Modified

• 재검증을 Request할 때 If-Modified-Since 필드에 캐시의 Last-Modified 값을 넣어준다.
• 서버는 이를 토대로 그 후에 수정이 있었는 지 여부를 알려줌.

2. ETag가 있는 가?

• 재검증 Request할 때 If-None-Match 필드에 캐시의 ETag 값을 넣어준다.
• 서버는 보내준 캐시의 ETag와 서버의 Etag가 같은 지 비교

 

Cache 무효화

유효기간이긴 하지만 클라이언트가 강제로 서버의 최신 데이터를 사용하고 다면

• 브라우저의 캐시 무효화 - 불가능
  • 사용자가 직접 브라우저의 캐시를 지울 수 는 있으나 개발자가 사용자들의 브라우저를 비워버릴 수는 없다.
• CDN 캐시 무효화
  • 해당 플랫폼에서 제공 - 대표적으로 CloudFront에서는 Invalidation이 있다.
• 캐시 버스팅
  • content/chunk hash : 새로 배포할 때 파일의 이름에 hash값을 붙여주면 다르게 인식
  • version : 파일 이름에 version이나 time stamp를 붙여주는 것.

 

#참고
https://i-ten.tistory.com/333

프론트엔드에서의 캐시

https://velog.io/@jhy979/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%BA%90%EC%8B%9C-%EC%84%A4%EC%A0%95