웹 파일 캐싱 방지

HTML Import Caching 방지

특정 HTML 파일을 업데이트하여 배포하였는데, html파일의 크기가 크기 때문에 브라우저에서 캐시를 해버려서, 수정된 내용이 아니라 이전에 캐시되어 있던 문서를 가져온다.

<link rel="import" href="/src/james-app/person.html"> <!--문제가 된 이녀석, 수정을 해도 수정된 사항이 반영이 되지 않음-->

캐시 문제는 보통 이러한 방식으로 해결을 했다. import 파일 뒤에 랜덤 쿼리 스트링을 (보통 시간값으로 함) 붙여주면 브라우저는 새로운 파일로 인식을 하기 때문에 캐시된 문서가 아닌 새로 배포된 문서를 받아온다. 비단 html뿐만이 아니라 javascript, css, img 등 모든 import에 적용되는 방식이다.

<img src="/photos/userid_73.jpg?random=<?php echo rand() ?>" ...

but, 모든 import 소스의 뒤에 queryString을 붙여야 하는데 그러긴 귀찮다.

그래서 조금 더 검색을 해본 결과 <meta> 태그를 이용하여 캐시 문제를 해결하는 방법을 찾을 수 있었다.

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">

이렇게 붙였더니 해결이 되었다.

그렇지만 어떤 원리로 해결이 되었는지는 알아야 된다고 생각해서 meta tag에 대한 정보를 검색하였고 아래와 같은 문서를 찾을 수 있었다.

원문은 아래와 같다.

Cache-Control

EXPIRES

정리하자면 다음과 같다

• <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
  • 캐시가 되지 않도록 설정
• <META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
  • content에 지정한 날짜 이후에는 웹문서를 캐시하지 않음
  • 캐시 방지를 목적으로 쓰는 경우에는 일반적으로 과거 날짜를 설정
• 캐시 방지를 목적으로 하는데 사용하는 비슷한 속성으로 몇가지를 더 찾음
  • <META HTTP-EQUIV="EXPIRE" CONTENT="-1">
    •  캐시 파기 시간 정의
  • <META HTTP-EQUIV="Pragam" CONTENT="NO-CACHE">
    • 캐시에서 해당 페이지를 읽어들이는 것을 방지함. 즉, 들어올 때마다 새로고침을 한 것과 같은 효과

내가 사용한 것은 위의 2개인데, 나머지 속성은 적용해보지 않았다.

무슨 차이일까 궁금하다. 4개나 있는 것을 보면 각각 적합한 용도가 있을 것 같은데..

추후에 시간이 나면 차이점을 찾아봐야겠다.

참고

• http://stackoverflow.com/questions/1922910/force-browser-to-clear-cache
• http://www.i18nguy.com/markup/metatags.html
• http://blog.munilive.com/%ED%8E%8C-%EB%A9%94%ED%83%80%ED%83%9C%EA%B7%B8meta-tag-%EC%86%8D%EC%84%B1%EC%A0%95%EB%A6%AC-%EB%B0%8F-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95/