Network - Cache 그리고 Cache-Control

캐시라는 단어는 오로지 캐쉬 ca-sh 였던 때가 있었다

하지만 지금은 이 캐시 ca-che 라는 녀석이 업무 영역 전반에 자리잡고 있다

이 친구 매력 있어서 궁금하다 좀 더 알아보자

 

---

Network - Cache 그리고 Cache-Control

 

클라이언트와 🔛 서버는 통신을 하며 데이터를 화면에 보여준다

BUT 이전에 받은 데이터와 === 새로 요청한 데이터가 같으면 이 과정은 낭비이다

 

그 낭비를 줄이기 위해 cache 정책을 사용하게 된다

잘 사용하면 Server는 부하를 줄이고, Client는 네트워크를 거치는 시간을 아낄 수 있다

 

데이터를 CDN같은 cache 서버 혹은 브라우저의 cache 안에 저장하고 꺼내서 사용하게 된다

그러기 위해 요청 헤더에 Cache-Control 을 사용한다

 

캐시의 종류

Private Cache
웹 브라우저에 저장되는 캐시이다 (로컬 캐시 또는 브라우저 캐시)

개인 사용자를 위한 저장 공간이며 다른 사람이 접근할 수 없다

단, 서버 응답에 Authorization 헤더가 포함되어 있다면 Private Cache에 저장되지 않는다

 

Shared Cache

Shared Cache 는 웹 브라우저와 서버 사이에서 동작하는 캐시를 의미하며, 다시 Proxy Cache와 Managed Cache 2가지로 나뉜다.

• Proxy Cache : (포워드) 프록시에서 동작하는 캐시이다.
• Managed Cache : AWS Cloudfront 혹은 Cloudflare 와 같은 CDN 서비스 그리고 리버스 프록시에서 동작하는 캐시이다. 이런 서비스들의 관리자 패널에서 직접 캐시에 대한 설정을 관리하거나 리버스 프록시 설정으로 관리할 수 있으므로 Managed Cache라고 불린다.

 

브라우저 캐시

프론트에서 개발을 하다보면 브라우저 캐시에 대한 핸들링이 필요할 때가 있다. 그래서 동작원리를 자세히 알아보았다. 

브라우저는 로컬 캐시를 가지고 있다. 그래서 웹서버가 데이터를 받아오면 로컬 브라우저 캐시에 저장된다. 

 

1) 서버로부터의 요청과 응답
사용자가 웹 페이지에 접속하면 브라우저는 해당 웹 페이지에 대한 요청을 서버에 보내고,
서버는 요청을 받고 웹 페이지의 HTML 파일과 해당 페이지에 필요한 리소스 (이미지, 스타일시트, 자바스크립트 파일 등)를 함께 응답한다.

 

2) 브라우저 캐시 확인
브라우저는 해당 웹 페이지의 리소스를 받아온 후 이를 캐시에 저장합니다.
이때, 서버가 리소스에 대해 어떤 캐싱 정책을 지정했느냐에 따라 캐시의 동작이 달라질 수 있다. 서버는 HTTP 헤더를 통해 캐싱 정책을 브라우저에게 알려준다.

 

3) 다음 방문 시 캐시 활용
사용자가 같은 페이지에 다시 접속하면 브라우저는 먼저 캐시를 확인합니다.
캐시에 해당 웹 페이지의 리소스가 있는 경우, 서버에 재요청하지 않고 캐시된 데이터를 사용하여 페이지를 로드합니다.
이로써 페이지 로딩 속도가 향상되고 대역폭을 절약할 수 있습니다.

 

캐시 갱신 및 만료:
서버에서는 HTTP 헤더의 Cache-Control이나 Expires 헤더를 통해 캐싱 시간을 설정할 수 있다.
유효 기간이 지나거나 서버에서 리소스가 갱신되었다면, 브라우저는 새로운 리소스를 받아 캐시를 갱신한다.

로컬브라우저 캐시를 받아오는 과정

 

max-age

Cache-Control: max-age=604800 # 서버에서 응답 생성된 후의 시간
Age: 100 # 다른 루트에있는 캐시는 100초동안 응답을 저장, 브라우저 캐시는 100초를 뺌

 

 

no-cache

# 서버에서 보내준 데이터를 캐시에 저장하고, 원본 서버에서 연결이 끊어진 경우
# 원본 서버에서 응답의 유효성을 검사해야 재사용 가능하다
Cache-Control: no-cache

 

 

 must-revalidate

# 응답이 캐시에 저장되며, refresh(새로고침)을 해도 다시 사용가능, max-age 와 함께 사용
# HTTP는 서버와 연결이 끊기면 예전 데이터를 재사용할 수 있게 허용하는데 
# 이 친구를 사용하면 서버와 재검증해서 최신 데이터를 받아옴 (만약 실패하면 504 gateway timeout error가 발생)
Cache-Control: max-age=604800, must-revalidate

 

 

 

ref:

https://www.blog-dreamus.com/post/cache-control-%EC%9D%B4-%ED%95%84%EC%9A%94%ED%95%9C-%EC%9D%B4%EC%9C%A0

https://hudi.blog/http-cache/