jsp 캐시

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<jsp:useBean id="today" class="java.util.Date"/>

<fmt:formatDate var="nowDate" pattern="yyyyMMddHHmmss"  value="${today}"></fmt:formatDate>

...<!-- jsp에서 오늘 날짜 만들어서 (원하는 포맷으로) js나 css뒤에 붙인다.-->

 

<script language="JavaScript" src="/jquery.js?date=%{nowDate}"></script>

 

 

 

 

---

(+20230818 추가) 

-  위에 코드만 추가했을 때 css나 js는 갱신이 됐는데 jsp내 수정사항은 바로 반영되지 않아서 추가하였다.. 

 

 

jsp에서 공통파일에 상단에 추가

 

<%

response.setHeader("Expires","0");

response.setHeader("Cache-Control","no-store, no-cache, must-revalidate");

response.setHeader("Cache-Control","post-check=0, pre-check=0");

response.setHeader("pragma","no-cache");

 

%>

 

https://stir.tistory.com/41

[JSP] 캐시 방지 & 캐시 삭제 팁

캐시 방지

둘 중 하나 사용하면 된다.

 

• JSP 페이지 - 공통 jsp파일에 해당 코드 추가

<%  
response.setHeader("Cache-Control","no-store");  
response.setHeader("Pragma","no-cache");  
response.setDateHeader("Expires",0);  
if (request.getProtocol().equals("HTTP/1.1"))        
	response.setHeader("Cache-Control", "no-cache");
%>  

 

• CSS, JS 각각에  추가 

<% 
Date now = new Date();
SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss");
String formatedNow = formatter.format(now);
%>

<link rel="stylesheet" type="text/css" href="common.js?ver=<%=formatedNow%>" />

하지만 현재시간은 계속 갱신된다는 단점으로 인해 클라이언트에서 용량이 많은 css나 js파일을 내려받는데에 속도가 느린 현상이 생길수가 있는데, 해당 문제가 발생한다면 개발자가 특정 행위(메뉴 수정, 관리자 페이지 내 캐시 갱신, 갱신용 서버 링크 호출 등)를 하고나면 DB에 해당 시간이 적재되어 해당 시간을 받아서 JS를 갱신할 수 있기 때문에 클라이언트 속도 + JS캐시 갱신문재를 해결하기 위해 좋다.

 

캐시 삭제

• Ctrl + Shift + R = 강력한 새로고침(시크릿 창 처럼 캐시 제거하도록 해서 수정된 것 반영)

 

 

https://velog.io/@leemember/HTTP-%ED%94%84%EB%A1%9D%EC%8B%9C-%EC%BA%90%EC%8B%9C

만약에 웹브라우저에서 저 멀리 있는 미국에 있는 원 서버까지 보내려면 되게 느리다. 대략 500ms가 걸린다고 해보자. 그래서 이미지 하나 다운받는데 500ms가 걸리는데 중간에 프록시 캐시를 도입하면 한국 어딘가에다가 프록시 캐시를 넣어두고, 요청이 오면 미국 원서버로 바로 보내는 것이 아니라 프록시를 거쳐서 오게 한다.

그래서 유투브를 볼 때, 사람들이 잘 안보는 외국 컨텐츠를 보면 유투브 다운로드가 굉장히 느리다. 사람들이 많이 보는 콘텐츠를 다운로드 받을 때는 로딩속도가 굉장히 빠르다. 그 이유는 한국에 있는 수많은 사람들이 다 다운로드를 받았기 때문이라고 한다!

첫 번째 유저는 보통 느리다. 두 번째 유저부터는 빨라진다. 퍼블릭 캐시와 프라이빗 캐시가 있는데, 중간에서 공용에서 사용하는 캐시를 퍼블릭 캐시라고 한다. 웹브라우저나 로컬에 저장된 캐시는 프라이빗 캐시라부른다.

Cache-Control (캐시 지시어)

1. Cache-Control (public) : 응답이 퍼블릭 캐시에 저장되어도 된다.
2. Cache-Control (private) : 응답이 해당 사용자만을 위한 것. 프라이빗 캐시에 저장해야 한다. (😀기본값😀)
3. Cache-Control (s-maxage) : 프록시 캐시에만 적용되는 max-age
4. Age: 60 (HTTP 헤더) : 오리진 서버에서 응답 후 프록시 캐시 내에 머문 시간 (초)

• Cache-Control:no-cache => 데이터는 캐시해도 되지만, 항상 원 서버에 검증하고 사용 (이름에 주의!)
• Cache-Control:no-store => 데이터에 민감한 정보가 있으므로 저장하면 안됨 (메모리에서 사용하고 최대한 빨리 삭제하기)
• Cache-Control:must-revalidate
  • 캐시 만료 후 최초 조회시 원 서버에 검증해야한다.
  • 원 서버 접근 실패시 반드시 오류가 발생해야 한다. (504, Gateway Timeout)
  • must-revalidate는 캐시 유효 시간이라면 캐시를 사용한다.
• Pragma : no-cache
  - HTTP 1.0 하위호환

💙 캐시 무효화 (확실한 캐시 무효화 응답)

Cache-Control : no-cache, no-store, must-revalidate
Pragma : no-cache

HTTP 1.0 하위 호환

이 페이지는 진짜 캐시가 되면 안돼! 라고 한다면 위에 코드들을 다 넣어주면 된다. 예를들어 통장잔고라던가 이런 개인정보유출이 되는 것에는 위에 코드를 써서 캐시를 막아 놓아야 한다. (국내 네이버에는 이렇게 되어있다.)

NO-cache

노캐시는 예를들어 Etag로 들어가면 프록시 캐시로 간다. 그럼 프록시 캐시가 이건 내가 처리하는 것이 아니군! 하고 원서버에 넘겨준다. 그러면 원서버가 검증을 해본다. 그럼 정상적으로 응답을 해준다.

Must-revalidate

1.캐시서버요청 옵션이 들어가버리면 프록시 캐시가 들어간다. 그런데, 프록시캐시가 이거 내가 처리하는거 아니네 라고하면 네트워크가 바로 단절이 된다. 그럼 504 게이트웨이 타임아웃이 나오도록 하는 것이 HTTP 스펙에 적혀있다.

예를들어서, 만약에 ! 통장잔고같은 돈과 관련된 것들은 정말 중요하다. 이것들은 오류가 나서 안보여야 한다. 프록시 캐시에 있는 과거 데이터들이 보이면 안된다.

이런 것들을 확실하게 프록시 캐시에 안보이게 해주려면

Cache-Control : no-cache, no-store, must-revalidate
Pragma : no-cache 👈 (HTTP 1.0하위호환까지 막아주려면 이 코드넣기)

이 코드 처리를 해줘야 한다.

---

(+20230822 추가) jsp가 반영이 안된다면

서버를 내려다 올릴 상황이 안된다면

나는 톰캣아래 프로젝트가 있는데

아파치톰캣/work/catalina/해당 프로젝트/root/org/apache/jsp/web_002dinf/폴더명

처럼 생긴 곳에서 파일이나 폴더를 지우면 된다.

---

(+20230906 추가) 뒤에 다 했는데도 수정사항이 캐시 삭제 하지 않고는 반영이 안된다고 한다.

보니까 css가 수정되었음에도 반영이 안됐던 건데

내가 jsp에서 

<link rel="stylesheet" href="/css/style.css?date=${nowDate}"> 해도

style.css 안에 

@import url("main.css");이런식으로 작성되어있다면 style.css파일 자체는 변경된 게 아니고 

main.css가 변경되었기 때문에  jsp에서는 main.css를 새로 읽어오지 않는 것 같다.

 

퍼블리셔 분에게 css파일이 수정되었으면

style.css파일에서 

@import url("main.css?v=202309061208");

이런 식으로 수정 됐을 때마다 버전 정보를 수정하고.

style.css와 main.css를 모두 반영해야 한다고 말해야 한다.