[http] cache-control: max-age

max-age에 대해 많은 곳에서 잘 설명해주고 있다. 하지만 실제 테스트해서 눈으로 확인이켜주는 곳은 많이 없다. 직접 http header를 다뤄보고 내것으로 만들려고 한다.

---

상황 1

응답에 cache-control:public,max-age=0 그리고 last-modified: Tue, 14 May 2024 02:37:45 GMT 둘 다 있을 경우 케쉬가 되어서 이유를 살펴보았다.

 

Cache-Control: public, max-age=0

 - public: 공용캐시 (프록시 서버)에 저장될 수 있다.

 - max-age=0 캐시된 응답이 생성된 직후에 만료됨을 의미. 캐시는 유효하지만, 사용하기전에 반드시 유효여부를 판단 후 사용해야 한다.

 

Last-Modified

 - 마지막으로 수정된 날짜와 시간을 의미. 이 응답을 받은 브라우저는 이 헤더의 값을 이용해서 If-Modified-Since 헤더를 만들어 요청한다. 즉 데이터가 너가 마지막으로 수정한 시간이후에 수정되었는지 확인한다. 

 

이 두 헤더가 같은 응답에 나온다면, 개발자는 난감하다. 그래서 어떻게 된다는거지?

확인해보니 캐쉬가 되고 있다. 이유는 브라우저가 첫번째 요청 때 Last-Modified를 받았기 때문에 If-Modified-Since 해더를 추가해서 요청해서 서버로 부터 304 Not-Modified를 받았기 때문이다.

 

상황2

max-age=0만 있을 때 유효여부를 판단하고 캐쉬 값을 사용할 수 있을까?

테스트 결과는 그렇지 않다. 검증할 수 있는 헤더를 추가해야하는데 응답에서 실마리를 주지 않아 추가할 수 없다. 캐쉬가 되지 않고 계속 200 OK와 함께 새로운 응답만 내려준다.

 

 

상황3

max-age: 10만 있을 때. 정말 잘 동작 하나?

html doc은 cache 못타게 막고, css파일만 max-age를 이용해서 케쉬가 잘 되는지 확인해보았다

 

테스트 잘된다. 10초 지나면 다시 서버에 응답을 요청한다.

app.set('etag', false)
app.set('Last-Modified', false)
app.use(express.static(path.join(__dirname, 'public'), {
  cacheControl: false,
  maxAge: 10,
  etag: false,
  lastModified: false,
  setHeaders: res => res.setHeader('Cache-Control', 'max-age=10')
}));

 

 

 

상황4

maxAge:10과 etag의 조합

10초 지난 후에 304 응답이 내려오고 그 후 다시 10초동안 메모리 캐시가 될까?

테스트 결과는 예상과 동일하게 동작한다.

app.set('etag', false)
app.set('Last-Modified', false)
app.use(express.static(path.join(__dirname, 'public'), {
  cacheControl: false,
  maxAge: 0,
  etag: true,
  lastModified: false,
  setHeaders: res => res.setHeader('Cache-Control', 'max-age=10')
}));

 

 

상황5

상황4와 비슷하지만 etag 대신 last-modified 값을 사용해서 조건부 캐쉬가 되는지 확인해보자

테스트 결과 예상과 동일하게 동작한다.

app.use(express.static(path.join(__dirname, 'public'), {
  cacheControl: false,
  maxAge: 0,
  etag: false,
  lastModified: true,
  setHeaders: res => res.setHeader('Cache-Control', 'max-age=10')
}));