Client Caching

wed cache란?

-사용자가 어떤 사이트에 접속할 때 원래 서버를 통해 사용자에게 정보를 제공하고 그와 함께 프록시 서버에 정보가 저장된 파일을 말한다. 동일한 서버에 다시 접근할 때에는 근처에 있는 프록시 서버의 웹 캐시에 저장된 정보를 불러오므로 더 빠른 열람이 가능하다.

client cache?

-이미지는 상대적으로 용량이 크기 때문에 서버측 부하도 크고, 응답속도도 증가 할수 있다. 또 그에 따른 네트워크 비용도 상승하게 된다.
-이러한 것을 줄이기 위해 클라이언트 측에 해당 리소스들을 저장한다. -문제는 서버측의 원본이 변경 되었을때, 이 원본의 변경 여부를 확인하기 위해 Etag 또는 If-Modified-Since라는 특수한 Http 헤더를 이용한다. 전자는 서버가 이해할수 있는 문자열, 후자는 날짜 값을 사용한다.

클라이언트 측 캐싱 작동 원리

(1) 웹브라우저가 get방식으로 /images/foo-img-01.png를 요청합니다. 요청헤더에 If-None-Match 값은 없습니다.
(2) 서버는 요청받은 이미지의 정보를 이용해서 Etag 값을 만듭니다.
(3) 서버는 이미지를 본문으로 응답하면서, 2에서 만든 Etag 값을 헤더로 같이 전달합니다.
(4) 웹 브라우저는 서버에서 받은 Etag 값을 캐시 키로 응답 받은 이미지를 저장해 놓습니다.
(5) 웹 브라우저가 /images/foo-img-01.png를 다시 요청하려 보니, 캐시카가 있다. 캐시 키를 If-Non-match 헤더에 달아서 요청합니다.
(6) 서버는 다시 Etag값을 만들고, IF-None-Match 요청 헤더의 값과 비교합니다. 두 값은 같습니다. 이는 웹브라우저에 캐시된 이미지와 서버의 이미지가 같다는 의미입니다.
(7) 서버는 304 Not modfied응답을 반환합니다. 응답 본문은 없습니다.
(8) 응답을 받은 웹브라우저는 자신의 캐시에 있는 이미지를 꺼내씁니다.
(9) 웹브라우저가 /images/foo-img-01.png를 다시 요청하려고 보니, 캐시 키가 있습니다. 캐시키를 If-Non-Match 헤더에 달아서 요청합니다.
(10) 서버는 다시 Etag 값을 만들고, Ig-None-Match 요청 헤더의 값과 비교합니다. 두 값이 다릅니다. 이는 웹브라우저에 캐시된 이미지와 서버의 이미지가 다르다는 의미입니다.
(11) 서버는 이미지를 본문에 응답라면서 10에서 만든 Etag 값을 헤더로 같이 전달한다.
(12) 웹 브라우저는 서버에서 받은 Etag 값을 캐시키로 응답 받은 이미지를 저장해 놓습니다. 기존 캐시는 삭제 합니다.

결론

참고 서적

• 라라벨로 배우는 실전 php 웹프로그래밍