[Web] 브라우저 캐시 비활성화하기 (수정본을 불러오지 않을 때)

손은실·2024년 3월 28일

web

Web

목록 보기

2/8

캐시 종류

Web Cache

클라이언트가 요청하는 파일을 내려 받아 특정 위치에 복사본을 저장
동일한 URL의 리소스 요청은 저장된 복사본을 사용
서버 트래픽 감소 효과

Browser cache

HTTP 요청을 하는 클라이언트 애플리케이션에 의해 내부 디스크에 캐시
캐시된 리소스를 공유하지 않으면 개인에 한정됨
뒤로가기, 페이지 재방문의 경우 효과가 극대화

리소스 (Resource)

웹 브라우저가 HTTP 요청으로 가져올 수 있는 모든 종류의 파일

HTML, CSS, JS, 이미지, 비디오 등

상황

클라우드 서버에서 수정된 파일이 클라이언트에게 보여지지 않는다

브라우저 사용자가 최신 파일을 보고싶다면 방문 기록을 삭제해야만 한다.
~~세상에 그런 사이트가 어디있나~~

원인

브라우저에 캐싱된 수정 전의 URL

브라우저는 동일한 URL은 캐싱된 리소스를 사용하는데, 서버에서는 코드를 변경했으나 URL은 동일하기 때문에 브라우저에 보이지 않았던 것이다.

해결 방법 1: 쿼리 스트링에 버전 추가

Query_String_1

브라우저는 요청할 URL이 캐싱된 URL과 다른 경우에만 새 리소스를 받아온다.
Query String 값이 바뀌므로 URL이 변경됐기 때문에 새 리소스를 받아오게 된다.

캐싱을 금지해버린 것이 아니라 긴 시간동안 수정이 되지 않으면(버전이 바뀌지 않으면) 캐싱된 URL의 리소스가 빠른 속도로 띄워지게 된다.

위 코드는 브라우저가 띄우는 index.html에 여러 개의 html을 불러오는 load_html.js 와 상단바의 스크롤을 구현하는 scroll.js 에 버전 정보를 추가한 것이다.

Query_String_2

크롬의 개발자 도구를 열어 리소스를 확인하면 버전 정보가 함께 표시된 것을 확인할 수 있다.

단점

귀찮음. 수정 사항이 있을 때마다 버전을 수정해야 함

해결 방법 2: 버전 자동 업데이트

쿼리 스트링의 버전 정보를 날짜로 변경하고, 날짜 정보를 받아와 자동으로 쿼리 스트링 값이 변경되는 Script를 추가했다.

<script>
    function getFormattedDate() {
      const date = new Date();
      const year = date.getFullYear();
      const month = ('0' + (date.getMonth() + 1)).slice(-2);  // 월
      const day = ('0' + date.getDate()).slice(-2);  // 일

      return `${year}${month}${day}`;
    }

    function updateQueryStringWithVersion() {
      let url = new URL(window.location.href); // 현재 URL
      const version = getFormattedDate(); // 현재 날짜를 yyyymmdd 형식으로 가져오기

      url.searchParams.set('ver', version); // 쿼리 파라미터에 버전 추가
      window.history.pushState({}, '', url); // 새로운 URL로 브라우저 주소 변경
    }

    window.onload = updateQueryStringWithVersion; // 쿼리 스트링 자동 업데이트
  </script>