캐시(Cache)란?
자주 쓰이는 문서의 사본을 자동으로 보관하는 HTTP 장치 입니다.
이전에 요청된 데이터나 파일을 저장하여, 같은 요청이 반복되는 경우 서버에 새로운 요청을 보내지 않고 이전에 저장된 데이터를 불러오는 것입니다. 따라서 웹 요청이 캐시에 도착했을 때, 캐시된 로컬 사본이 존재한다면, 그 문서는 원서버가 아니라 캐시로부터 제공됩니다.
결론적으로 캐시는 서버와 클라이언트 간의 트래픽을 줄이고, 웹 페이지 로드 시간을 단축시키며, 사용자 경험을 향상시킬 수 있습니다.
- 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우 사용
- 반복적으로 동일한 결과를 돌려주는 경우(특정 이미지 or 썸네일 등) 사용
장점
- 불필요한 데이터 전송을 줄여서, 네트워크 요금으로 인한 비용을 줄여준다.
- 네트워크 병목을 줄여준다. 대역폭을 늘리지 않고도 페이지를 빨리 불러올 수 있게 된다.
- 원서버에 대한 요청을 줄여준다. 서버는 부하를 줄일 수 있으며 더 빨리 응답할 수 있게 된다.
- 거리로 인한 지연을 줄여준다. 페이지를 먼 곳에서 불러올수록 시간이 많이 걸린다.
정리
캐시는 서버와 클라이언트 간의 트래픽을 줄이고, 웹 페이지 로드 시간을 단축시키며, 사용자 경험을 향상시킬 수 있다.
단점
- 캐시가 만료되지 않았을 때 업데이트된 파일을 새로 받아오지 않아 문제가 발생할 수 있다.
프론트엔드에서 캐시를 사용할 수 있는 영역?
1. 브라우저 캐시
브라우저 캐시는 브라우저에서 로컬 웹 페이지 리소스를 저장하는 데 사용되는 메커니즘입니다. 이로 인해 성능이 향상되고 대역폭 소비가 최소화되어 개선된 환경이 만들어집니다.
브라우저 캐시는 CSS, JS, 이미지, 비디오 등의 정적 리소스를 포함하는 작은 데이터베이스입니다.
방식
- 브라우저가 웹 서버의 일부 컨텐츠를 요청한다.
- 컨텐츠가 브라우저 캐시에 없으면 웹 서버에서 직접 검색한다. 컨텐츠가 이전에 캐시 되었다면 브라우저는 서버를 우회하여 캐시에서 직접 콘텐츠를 로드한다.
브라우저 캐시의 생명주기
보통 웹브라우저가 서버에서 지금까지 요청한 적이 없는 리소스를 요청하게 되면,
서버와 브라우저는 완전한 HTTP 요청과 응답을 받게 됩니다.
하지만 그 이후의 요청은 HTTP 응답에 포함된 Cache-Control 헤더에 따라 받은 리소스의 생명주기가 결정되게 됩니다.
Cache-control
Cache-control 헤더는 HTTP/1.1에 도입되었습니다. 브라우저의 작동 방식에 따라 사용 가능한 여러 필드가 있습니다.
-
No-cache
웹 브라우저가 즉시 캐시를 참조하지 않고 서버에 대해 컨텐츠의 유효성을 검사하도록 지시한다. Fresh의 경우 캐시에서 제공한다. -
No-store
브라우저가 컨텐츠를 캐시하지 않도록 지시합니다. 민감한 데이터나 자주 변경되는 데이터를 다룰 때 주로 사용된다. -
Public
칸텐츠를 공개로 표시한다. 즉, 브라우저 및 프록시 등의 중개자가 캐시 할 수 있음을 의미한다. -
Private
컨텐츠를 표시하는데 사용되며 중간 프록시 등이 아닌 브라우저에서만 캐시 할 수 있다. 일반적으로 사용자 관련 데이터를 나타낸다. -
Max-age
Max-age는 클라이언트가 클라이언트 유효성을 다시 확인해야 브라우저 캐시에 콘텐츠를 남겨 둘 수있는 최대 시간(초)을 나타낸다. Expires 헤더와 달리, max-age는 콘텐츠가 캐시된 시간의 상대 값을 초 단위로 정의한다. 절대 만료 날짜가 아니다. -
S-maxage
max-age와 비슷하지만 중간 캐시에만 사용된다. -
Must-revalidate
브라우저 캐시에서 직접 제공하는 대신 브라우저가 필요할 때마다 콘텐츠의 유효성을 다시 확인하도록 한다. 네트워크 중단이 발생했을 때 유용하다. -
Proxy-revalidate
Must-revalidate 와 유사하지만 중간 캐시에만 적용된다. -
no-transform
브라우저에 어떤식으로든 (일반적으로 압축 등) 서버로부터 받은 컨텐츠를 변형시키지 않도록 지시한다.
2. 프록시 캐시
3. API 캐시
API는 클라이언트와 서버 간의 통신을 위한 인터페이스입니다. API 캐시를 사용하면, 이전에 요청한 API의 결과를 저장하여 동일한 요청에 대해 서버에서 데이터를 다시 가져오지 않고 이전 결과를 반환합니다. 이렇게 하면 서버 부하를 줄이고, 빠른 응답 시간을 제공할 수 있습니다.
