브라우저 캐싱 막는 방법

결론 부터 말하면  url뒤에 파라미터 값 설정하면 됨

<link href="styles.css" rel="stylesheet"/>

<link href="styles.css?v=nice" rel="stylesheet"/>

style.css 뒤에 파라미터로 v 를 넣고 뒤에 값은 아무거나 쓰면된다, 주로 날짜 또는 난수를 넣음

 

브라우저 캐싱이란?

웹 브라우저가 이미 다운로드한 웹 페이지의 자원(이미지, 스타일시트, 스크립트 등)을 저장하고 재사용하는 기술입니다. 이를 통해 사용자가 동일한 웹 페이지를 여러 번 방문할 때 불필요한 자원 다운로드를 줄이고 웹 페이지 로딩 속도를 향상시킬 수 있습니다.

브라우저 캐싱은 다음과 같은 원리로 작동합니다:

캐시 제어 헤더:
웹 서버에서 응답 헤더에 캐시 제어 헤더(Cache-Control, Expires 등)를 포함하여 브라우저에게 어떻게 캐싱할지 알려줍니다.

브라우저 캐시 저장소:
브라우저는 캐싱된 자원을 로컬 저장소에 저장합니다. 저장소는 브라우저의 캐시 또는 로컬 스토리지와 같은 형태일 수 있습니다.

자원 요청 시 확인:
브라우저는 새로운 페이지를 로드할 때마다 서버로부터 자원을 다시 요청하기 전에 로컬 캐시에 해당 자원이 있는지 확인합니다.

조건부 요청:
서버로부터 자원을 다시 가져와야 하는 경우에도, 캐시 제어 헤더에 따라 "조건부 요청"을 보내어 서버에 자원이 변경되었는지 확인합니다. 변경이 없다면 서버는 304 Not Modified 응답을 보내고 로컬 캐시를 사용하도록 합니다.

브라우저 캐싱은 웹 성능을 향상시키는데 기여하며, 사용자 경험을 개선합니다. 그러나 개발자가 캐시 제어 헤더를 적절히 설정하지 않으면 원하지 않는 캐싱 동작으로 인해 업데이트된 자원을 적용하는 데 어려움을 겪을 수 있습니다.

 

 

v=nice의 의미?

 

여기서 v=nice는 캐시를 방지하기 위한 일반적인 방법 중 하나입니다. 만약 스타일시트가 변경되면, 개발자는 URL 파라미터 값을 변경하여 브라우저에게 새로운 버전의 스타일시트를 가져오도록 할 수 있습니다.

이러한 방법은 브라우저가 캐시된 자원을 사용하지 않고 새로운 자원을 요청하도록 유도하기 위해 사용됩니다. 변경된 캐시 버전이나 새로운 자원을 즉시 반영하려면, URL에 파라미터를 추가하여 브라우저에게 새로고침을 강제하는 방법이 흔히 사용됩니다.