브라우저 캐시

브라우저 캐시 상태 확인 방법

• 브라우저캐시가 일어나면, 개발자도구의 네트워크탭의 크기 컬럼에 (디스크캐시) 또는 (메모리캐시) 라고 표기된다.

파일별 브라우저 캐시 규칙

• 서버에서 응답헤더에 Cache-Control 속성으로 max-age=172800 이나 no-cache, no-store 와 같은 규칙을 내려서 보내주면 브라우저가 이 옵션을 바탕으로 파일을 캐시한다.

Cache-Control: max-age=172800

• 브라우저에서 해당 파일을 48시간 동안 캐시하여 재사용한다.
• 만약 기간이 만료된 경우, 서버에서 해더에 포함하여 함께 내려줬던 Etag값으로 해당 파일의 업데이트된 버전이 있는지 서버에 물어본다.
  • 만약 새로운 버전이 있을경우 새로운 파일과 함께, 새로운 파일에 대한 새로운 Etag값도 서버에서 다시 내려준다.
  • 만약 새로운 버전이 없을경우 원래있던 Etag에 해당하는 파일이 최신 파일이니 그냥 쓰라고 브라우저에 알려주고, 브라우저는 그냥 재사용한다.

Cache-Control: no-cache

• no-cache 이거나 Cache-control 이 없으면 max-age=0 이라는 뜻이므로 서버로부터 매번 Etag를 확인하여 새 파일인지 확인하는 방식으로 캐시된다.

Cache-Control: no-store

• 브라우저는 Etag도 확인할 필요없이 서버로부터 항상 새로운 파일을 받아온다.

서버 캐시

브라우저캐시와는 다른 개념으로 헷갈리면 안된다.

• 개발자도구의 네트워크탭의 크기 컬럼에 (디스크캐시) 또는 (메모리캐시) 라고 표기되지 않았는데도 여전히 예전 버전의 파일이 내려온다면 서버 캐시라고 생각하면 된다.
• 서버에서 특정 파일을 캐시하여 내려주는경우 보통 헤더에 X-Proxy-Cache 값이 hit 인지 miss 인지 정보를 함께 포함하여 내려준다.
• 하지만 X-Proxy-Cache 헤더의 포함여부는 공식적인 값도 아니고 암묵적인 약속에 의한 값이므로, 서버캐시 되었다고 해서 꼭 함께 내려온다는 보장이 없다.
• (서버캐시를 방지하기 위해 보통 요청url 뒤에 새로운 쿼리 파라미터로 새로운 파일버전을 붙이는 방식을 사용한다.)