일반적으로 브라우저는 캐시를 저장하고 해당 캐시를 사용함으로 리소스를 절약한다.
하지만 빈약한 운영체제 ( 안드로이드 TV용 잡다한 웹 브라우저 등등) 에서는 해당 캐시 메모리를 저장하는것 만으로도 나중에 뻗어버리는 경우가 생긴다.
때문에 일반적인 웹페이지가 아닌 사용자의 개입이 없고 페이지 이동이 없는 모니터링 페이지의 경우 캐시를 저장할 이유가 없다.
Cache-Control을 추가하여 Cache의 속성을 컨트롤 할 수 있다.
구글링을 하면 기본적으로 자바스크립트의 헤더를 사용하여 페이지 컨트롤을 한다.
<meta http-equiv="Cache-Control" content=" no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
기본적으로 Pragma는 HTML 1.0을 위한 환경에서 옵션이 적용된다고 한다.
(1.0 환경에선 cache-control을 무시하고 저장 될 수 있다는 뜻)
크롬 파폭 등의 메이저 브라우저가 아니기 때문에 장담할 수 없어서 넣었다.
속성값의 의미는
no-cache : 캐시 자체는 저장하지만 사용은 하지 않고 서버에 검증을 한다.
no-store : 캐시 사용 자체를 하지 않는다.
must-revalidate : 캐시 만료 후에 처음 조회 시 서버에 검증을 한다.
개인적으로는 그럼 no-store만 명시하면 되는것 아닌가? 라는 생각을 했지만
구글의 여러 전문가님들께서는 함께 명시해야 한다고 한다.
왜...?
역시나 웹은 멍청이라 잘 모르겠다.
아무튼 react 의 경우엔 헤더에 추가하는걸로는 적용이 되지 않는듯 했다.
여전히 스크립트 캐시는 존재했고 속성값에 CacheControl은 없었다.
자바스크립트 멍청이라 잘 모르겠다...
크롬의 Dev-Tool 에서 요청헤더값과 응답헤더값에도 Cache Control이 존재하지 않았다.
res.setHeader(
"Cache-Control",
"no-cache, no-store, must-revalidate"
);
res.setHeader("Pragma", "no-cache");
그래서 백엔드쪽에 헤더를 붙여주니 응답헤더쪽에는 변화가 있었다.
Cache-Control:
no-cache, no-store, must-revalidate
Connection:
close
Content-Encoding:
gzip
Content-Type:
application/json; charset=utf-8
Date:
Thu, 12 Oct 2023 07:58:24 GMT
Etag:
W/"5f36-mHImeY7/2bK2jlP59uTlsPliBqY"
Pragma:
no-cache
요청시에도 Cache-Control을 넣기위해 Fetch시 요청헤더값에 넣어봤지만 작동하지 않는다.
fetch에서는 고정속성값이 아니면 아예 에러가 발생했다.
cacheControl 이라는 고정속성은 없었고 cache가 존재했다.
fetch("/main/MyTestViewer", {
method: "PUT",
cache: "no-cache",
})
no-cache로 명시하자 요청헤더에도 cache control이 표시가 되었지만...
Accept:
*/*
Accept-Encoding:
gzip, deflate, br
Accept-Language:
ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7
Cache-Control:
max-age=0
Connection:
keep-alive
Content-Length:
0
max-age = 0 으로 표기가 되었다.
사실상 no-cache와 같은 의미이긴 하다.
유효성이 오버되었기때문에 새로운 데이터를 검증한다는 면에서는 같지만 아예 캐시를 사용하지 않는다는 뜻은 아니다.
fetch("/main/MyTestViewer", {
method: "PUT",
cache: "no-store",
})
no-store로 명시하자 요청헤더에 Cache-Control 항목이 사라졌다.
하지만 일단 놔둔다.
참고링크
해당 글에서는 no-store , no-cache와 함께 reload , force-cache라는것도 함께 설명하고 있다.
일단 이대로 테스트를 진행하며 일정 시간 이후 캐시가 삭제된 후 다시 올라오는지를 체크해 봐야겠다.
'WORK > WEB' 카테고리의 다른 글
| browser response state code 200 , 304 (0) | 2025.03.31 |
|---|---|
| [React] SetInterval 을 대신할 UseInterval (0) | 2025.03.31 |