인터넷을 이용할 때 페이지가 빠르게 로드될 수 있는 것은 브라우저의 캐시 덕분이다.
특정 사이트에 접속할 때마다 브라우저가 해당 사이트에 대한 정보를 새로 가져오는 것이 아닌, 캐시된 데이터를 가져와 보여주기 때문에 빠르게 이용할 수 있다.
하지만 이는 약간의 부작용(?)이 있다.
사이트의 특정 부분이 변경되었을 때 새로 가져오는것이 아닌 캐시된 정보를 보여주기 때문에 변경사항이 보이는 것이 아니라 변경 전의 상태가 보일 수 있다는 것이다!
실제로 이번에 사이트 리뉴얼 후 오픈을 하였는데 특정 페이지에서 기존의 화면이 보이는 현상이 나타나 캐시 설정을 해주었다.
그럼 자세히 알아보자.
📌 페이지 캐시란?
캐시(Cache)는 이전에 요청된 리소스를 임시로 저장해 두었다가, 동일한 리소스가 다시 요청될 때 이를 재사용함으로써 로딩 시간을 단축시키는 기술이다.
웹 페이지의 캐시는 브라우저, 서버, CDN(Content Delivery Network) 등 다양한 위치에 저장될 수 있으며, 주로 다음과 같은 요소들을 캐싱한다.
- HTML 파일 : 웹 페이지의 구조를 정의하는 파일.
- CSS, JavaScript 파일 : 페이지의 스타일과 동작을 정의하는 파일들.
- 이미지, 폰트 등 정적 리소스 : 페이지의 시각적 요소들.
캐시를 사용하면 서버 부하를 줄이고, 네트워크 트래픽을 감소시키며, 사용자는 빠른 로딩 속도를 경험할 수 있다.
하지만 이러한 캐시는 특정 상황에서 문제가 될 수 있다. 예를 들어, 자주 업데이트되는 웹사이트에서 캐시된 오래된 콘텐츠를 사용자가 보게 되는 경우다.
여기서 js파일이나 css파일 같은 경우는 버전관리를 통해 이를 해결할 수 있다. 하지만 js와 css파일이 아닌경우는 다른 설정이 필요하다.
📌 no-cache 설정
다음과 같이 공통으로 사용하는 페이지에 메타태그를 이용하여 캐시설정을 해줄 수 있다.
<META http-equiv="Expires" content="-1">
<META http-equiv="Pragma" content="no-cache">HTTP/1.0 -> pragma를 사용하여 Cache 설정
<META http-equiv="Cache-Control" content="no-cache"HTTP/1.1 -> Cache-Control을 사용하여 Cache 설정
이렇게 하면 페이지를 불러올 때 캐시된 데이터를 사용하지 않고 새로 불러온다.
추가로, http 버전이 몇인지 확인하는 방법은, 웹 페이지에서 F12(개발자도구) - 네트워크에 들어가면 프로토콜 항목에서 확인할 수 있다.
