이전글

웹 브라우저 캐시
웹 개발을 하다보면 게시글 등의 데이터를 DB에 등록했는데도 브라우저에서 새로고침 시 해당 데이터에 대한 내용이 반영되지 않는 경우가 있습니다.
혹은 데이터뿐만이 아닌 javascript나, HTML, CSS등의 정적 자원을 서버에서 수정했는데도 새로고침시 적용되지 않는 경우도 있습니다.
많은 원인이 있을 수 있으나 이는 브라우저 캐시가 원인일 수 있습니다.

브라우저에는 캐시가 있는데, 이것은 서버와의 불필요한 통신을 하지 않기 위해 마련된 공간입니다.
최초 서버로부터 요청한 자원들(javascript, HTML, CSS, 이미지 등)을 내려받고 같은 자원을 새로고침등을 통해서 다시 요청하는 경우 브라우저는 실제로는 서버로 HTTP 요청을 하지 않고 브라우저 자신의 캐시에 저장해 두었던 자원들을 사용하게 됩니다.

예를 들어 test.jsp 를 최초 요청한 경우 서버로부터 응답된 자원들을 브라우저 캐시에 저장하고 F5나 주소표시줄에 주소를 입력해 다시 test.jsp를 요청한 경우 불필요하게 다시 HTTP 요청을 하는것이 아니라 캐시에서 꺼내서 화면에 보여주는 것입니다.

이러한 브라우저 캐시 기능이 성능상 이점을 가져다 줄 수는 있겠으나 게시판이나, 네이버의 실시간 검색어처럼 자주 변하는 부분까지 브라우저 캐시를 사용한다면 사용자는 변화하는 결과를 볼 수 없고 같은 화면만 계속해서 보게 될 것입니다.


응답 헤더를 통한 캐시제어
HTTP 응답 메지의 몇 가지 헤더 속성을 통해서 브라우저가 현재 페이지 내용을 캐시를 사용하지 않도록 할 수 있습니다.
다음은 HTTP 1.0 , 1.1에서 캐시 제어에 관한 헤더 속성값이며, 해당 속성들을 사용해 브라우저가 캐시를 사용하지 않고 매번 새로운 요청을 통해 결과를 얻어오도록 할 수 있습니다.


HTTP 응답 헤더
설명
Cache-Control
HTTP 1.1 버전에서 지원하는 헤더로 no-cache로 설정하면 브라우저는 응답받은 결과를 캐싱하지 않습니다. 또한 뒤로가기 등을 통해서 페이지 이동하는 경우 페이지를 캐싱할 수 있으므로 no-store 값 또한 추가해 주어야 한다.
Pragma
사용자가 브라우저를 업데이트 하지 않는 등의 원인으로 인해 브라우저가 HTTP 1.0 버전을 사용할 수 있다. HTTP 1.0 버전에서 지원하는 헤더로 no-cache로 설정해준다.
Expires
마찬가지로 HTTP 1.0 버전에서 지원하는 헤더로 현재 응답 결과의 만료일을 지정하는데, 현재보다 과거의 시간을 지정해주어 캐싱하지 않도록 해줄 수 있다.


JSP의 경우에는 스크립트릿 안에서 response 기본객체를 이용하고 서블릿의 경우에는 service()나 doGet(), doPost()등의 두 번째 매개변수로 넘어오는 HttpServletResponse 객체를 이용하도록 합니다.
Expires에 1L(Long)로 지정하면 1970-01-01 00:00:00 0.001 을 의미하게 됩니다.
1
2
3
4
     response.setHeader("Cache-Control""no-cache");
     response.addHeader("Cache-Control""no-store");        
     response.setHeader("Pragma""no-cache");
     response.setDateHeader("Expires", 1L);
cs

 

 

해당 URL을 요청 했을때의 HTTP 응답 메시지는 다음과 같을 것입니다.
HTTP/1.1 200
Set-Cookie: JSESSIONID=1467D932DF47265CEBAF13EA3B5CE41C; Path=/myApp; HttpOnly
Cache-Control: no-cache
Cache-Control: no-store
Pragma: no-cache
Expires: Thu, 01 Jan 1970 00:00:00 GMT
Content-Type: text/html;charset=UTF-8
Content-Length: 142
Date: Tue, 13 Feb 2018 08:46:26 GMT

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
캐시제어 테스트  
</body>
</html>
블로그 이미지

도로락

IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그

,