캐시된 파일은 서버에 요청하지 않는가? :: 마이구미

제목 그대로 캐시(Cache) 에 대한 관한 글이다.

그 외에도 본인이 작성한 캐시를 주제로 하는 글들이 존재한다.

먼저 읽는다면, 좋을 것이다.

메모리 캐시 vs 디스크 캐시

캐시 제어 응답 헤더 설정

본인이 의문은 다음과 같았다.

누군가에게는 너무나 당연한 내용일 수도 있다.

(부끄럽지만 서버쪽 지식이 부족해서 의문이 생긴 거라고 볼 수 있다.)

클라이언트가 서버에게 보내는 요청에 대한 응답이 캐시되었다면, 다음에는 서버에 요청없이 브라우저 자체에서 처리하는가?

위와 같은 예는 다음과 같다.

개발자 도구를 통해 확인할 수 있듯이, 위와 같은 경우는 메모리 캐시 또는 디스크 캐시로부터 가져온다.

이와 같은 경우에서 서버에 요청 여부에 대한 의문이다.

캐시를 활용하기 때문에, 서버에 요청할 이유가 없다.

그렇다는건, 당연히 서버에 요청조차 하지 않고 브라우저가 알아서 하리라 생각했다.

지금껏 너무도 당연하다고 생각했지만, 사실상 스스로 증명한 게 없으니 추측이다.

증명 및 확인을 위한 테스트를 했다.

테스트는 Express 에서 express.static 를 사용해 진행했다.

첫 요청에 200 상태 코드를 내려준 후, 다음 요청에서 304 상태 코드를 내려주는 모습을 볼 수 있다.

메모리 캐시나 디스크 캐시에서 가져오지 않는 모습을 볼 수 있다.

304 상태 코드는 파일이 수정되지 않았을 경우 서버에서 보내주는 상태이다.

이러한 경우에서는 별도 작업을 하지 않는다.

별도 작업을 하지않는다는 건, 실시간으로 응답을 생성하지 않는다는 것이다.

단순히 브라우저에게 캐시된 파일을 사용하라고 지시하는 것이다.

위와 같은 경우도 사실상 첫 요청보다는 빠르다.

하지만, 서버에 요청을 시도한다는 것 자체가 지연시간이 발생한다는 점이다.

위처럼 메모리 캐시 또는 디스크 캐시로 가져오지 않은 이유는 다음과 같다.

Response Headers 에서 Cache-Control 의 값이 max-age=0 인 것을 볼 수 있다.

max-age 는 만료시간으로, 0 으로 지정되어 있어서, 최신 상태로 인정되지 않아, 서버에 요청하게 된 것이다.

express 공식 문서를 확인해보면, max-age값의 디폴트가 0 인 것을 볼 수 있다.

http://expressjs.com/en/4x/api.html

app.use(express.static('public', {
    maxAge: 86400 * 1000 // 24시간
}))

max-age 값을 수정한 후에는 원하는 결과를 얻을 수 있었다.

만약 max-age 값이 지나게 되면, 다시 서버에 요청을 보내게 된다.

또한, 메모리 캐시나 디스크 캐시로부터 가져온 경우에는 서버에게 요청조차 하지 않는 모습도 확인할 수 있었다.

그렇다고, 캐시에 대해 무조건 오랫동안 유지하는 것은 아니다.

왜냐하면 서버에 요청하지 않는다는 건, 업데이트 시 사용자가 캐시를 지우지 않는 이상 업데이트를 반영할 수 없다는 것을 의미한다.

로고와 같은 이미지는 만료를 1년으로 지정하는 경우도 볼 수 있었다.

이와 같이 상황에 맞게 지정하면 된다.