백엔드에 레디스가 있다면 프론트엔드에는 웹 캐시(http cache)가 있다.
웹 캐시의 종류
브라우저 캐시: 사용자 컴퓨터의 로컬 저장소에 이전 방문한 웹페이지의 정적 자원을 저장해 사용한다.
프록시 웹 캐시: 클라이언트와 origin 서버 간의 프록시
-> ex) CDN : 콘텐츠 전송 네트워크(Content Distribution Network). 이를 통해 트래픽을 지역화
웹 캐시는 캐시에 대한 정보를 전달하기 위해(캐시의 유효기간, 업데이트 날짜 등) http 헤더를 적극적으로 활용한다.
예를 들어, 브라우저를 렌더링하는데 다음과 같은 스크립트가 있다고 하자
<script src="test.js"></script>이런 스크립트 태그에서 필요로 하는 js, 그리고 css, 이미지 등 원본을 직접 변경하지 않는한, 동적으로 변경될 가능성이 없는 리소스를 정적 파일이라고 부른다.
그리고 이런 태그가 있을 때에, 브라우저는 웹 서버에 test.js를 GET으로 요청한다(image, 음악 등도 같은 방식)
그럼 이때 요청을 받은 웹 서버(ex.nginx)는 해당 요청을 원본 파일을 지니고 있는 서버로 넘겨줄것인지,
아니면 브라우저가 캐싱하고 있는 데이터를 그대로 쓰라고 할 것인지를 결정한다.
정적 파일에 변경 사항이 없고 캐시에 데이터가 있는 경우,
nginx는 이를 파악하여 304 NOT MODIFED 응답(원본 리소스에 비해 매우 작음)을 보낸다.
이와 같은 동작을 위해 nginx를 설정해주는 방법은 다음 블로그에서 확인!
📝 dev wiki