[nodejs] 브라우저 캐싱 전략

18 Dec 2023

브라우저 캐싱은 웹 페이지 및 자원을 사용자의 브라우저에 저장하여 성능을 향상시키는 방법입니다. 이 글에서는 브라우저 캐싱을 위한 전략에 대해 알아보겠습니다.

캐싱의 기본 동작

브라우저는 서버로부터 받은 자원에 캐시 헤더를 확인하고, 해당 자원을 로컬 스토리지에 저장합니다. 이후 같은 자원을 요청할 때 서버에 재요청하지 않고 저장된 캐시를 사용하여 성능을 향상시킵니다.

서버는 캐싱 제어 헤더를 통해 클라이언트(브라우저)에게 어떻게 자원을 캐싱할지 지시할 수 있습니다. Cache-Control 헤더를 사용하여 캐싱 정책을 명시하고, Expires 헤더를 사용하여 캐시의 만료 시간을 설정할 수 있습니다.

// Cache-Control 헤더를 사용한 캐싱 정책 명시
Cache-Control: max-age=3600, public

// Expires 헤더를 사용한 캐시의 만료 시간 설정
Expires: Wed, 21 Oct 2020 07:28:00 GMT

자원 파일에 버전 번호를 추가하여 파일의 변경 여부를 확인할 수 있습니다. 파일의 내용이 변경될 때마다 버전 번호를 업데이트하여 브라우저에게 새로운 파일을 제공합니다.

<!-- 버전화된 CSS 파일 -->
<link rel="stylesheet" href="styles.css?v=1">

<!-- 버전화된 JavaScript 파일 -->
<script src="script.js?v=1"></script>

캐싱을 효과적으로 사용하여 웹 페이지의 성능을 향상시키고 사용자 경험을 향상시킬 수 있습니다. 적절한 캐싱 전략을 수립하여 웹 애플리케이션의 성능을 최적화하는 것이 중요합니다.