백엔드 개발자도 알아야 하는 브라우저 캐시의

브라우저 캐시는 단순히 프론트엔드의 영역이 아니라, 실제 서비스의 성능과 트래픽 비용, 심지어 버그 발생 가능성까지 영향을 미치는 아주 중요한 요소이다.

 

브라우저 캐시란?

브라우저 캐시는 클라이언트(사용자의 웹 브라우저)가 자주 사용하는 데이터를 저장해두고, 다음에 다시 요청할 때 빠르게 보여주기 위한 기술이다. 

 

예 : 어떤 쇼핑몰 사이트에 방문시, 그 사이트의 로고 이미지가 매번 서버에서 오면 느릴것이다. 그래서 브라우저는 이걸 한 번 다운로드한 뒤, 다음부터는 자기 컴퓨터에 저장된걸 보여준다.

 

 

브라우저 캐시의 핵심 메커니즘 

1. Cache-Control

서버가 클라이언트에게 이 리소스를 어떻게 캐시해야 할지 알려주는 HTTP 헤더이다.

• max-age=3600 -> 1시간 동안 캐시해라
• public -> 누구나 캐시해도 된다

2. ETag / Last-Modified

• 캐시된 파일이 변경됐는지 확인하는 데 사용한다.
• 변경이 없으면 304 Not Modified로 응답해서 데이터를 아예 보내지 않는다.

 

 

3. 실무에서 사용 가능한 전략

리소스 타입	캐시 전략
이미지, JS, CSS	long-term 캐시 + 파일명에 해시
HTML 페이지	no-cache 또는 must-revalidate
API 응답(GET)	short max-age 또는 no-store

 

 

4. CDN과의 캐시 연계

클라우드플레어, AWS CloudFront 같은 CDN은 브라우저 뿐 아니라 서버 앞단에서 전 세계에 캐시를 제공한다. 이를 통해 TTFB(Time to First Byte)를 극적으로 낮출 수 있다. 

 

서버 -> CDN -> 브라우저 순으로 캐시 계층을 구성하면 성능 최적화에 큰 효과가 있다.

 

 

5. 디버깅 방법

브라우저 개발 도구에서 Network 탭을 열고, 리소스를 확인하면 아래 정보들을 볼 수 있다.

• Status : 200 OK vs 304 Not Modified
• Cache-Control 헤더
• ETag / Last-Modified 여부

실제로 문제를 겪을 때 이 도구를 통해 빠르게 원인을 추적할 수 있다.