[모든 개발자를 위한 HTTP 웹 기본 지식] 08. HTTP 헤더2(캐시와 조건부 요청) - 캐시 기본 동작

(인프런) 김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식을 공부하고 리뷰한 글입니다.

1. 캐시 기본 동작

1. 캐시가 없을 때

1) 첫 번째 요청

브라우저에서 GET /star.jpg 첫번째 요청을 보내면, 서버는 HTTP 헤더(0.1M) + HTTP 바디=star.jpg 이미지(1.0M)를 담아 응답을 보낸다.

브라우저에 서버로부터 응답받은 이미지가 표시된다.

 

2) 두 번째 요청

브라우저에서 GET /star.jpg 두번째 요청을 보내면, 서버는 HTTP 헤더(0.1M) + HTTP 바디=star.jpg 이미지(1.0M)를 담아 응답을 보낸다.

브라우저에 서버로부터 응답받은 이미지가 표시된다.

 

<캐시가 없을 때 정리>

- 데이터가 변경되지 않아도 계속 네트워크를 통해 데이터를 다운로드 받아야 한다.

- 인터넷 네트워크는 매우 느리고 비싸다.

- 브라우저 로딩 속도가 느리다. (느린 사용자 경험)

 

2. 캐시 적용

1) 첫 번째 적용

브라우저에서 GET /star.jpg 첫번째 요청을 보내면, 서버는 HTTP 헤더(0.1M) + HTTP 바디=star.jpg 이미지(1.0M)를 담아 응답을 보낸다. 중요한 점은 HTTP 헤더에 cache-control로 캐시 유효 시간을 설정해서 응답한다는 것이다. 여기서는 최대 캐시 유효 시간을 60초로 설정하였다.

브라우저 캐시(브라우저에 캐시를 저장하는 저장소)에 60초 유효상태로 응답 결과를 저장한다.

 

2) 두 번째 적용

브라우저에서 GET /star.jpg 두번째 요청을 하기전 먼저 브라우저 캐시에 요청을 보내고 캐시 유효 시간을 검증한다.

캐시 유효 시간(60초)가 유효하다면 캐시에서 직접 조회하여 브라우저에 이미지를 표시한다.

 

<캐시 적용 정리>

- 캐시 가능 시간동안 네트워크를 사용하지 않아도 된다.

- 비싼 네트워크 사용량을 줄일 수 있다.

- 브라우저 로딩 속도가 매우 빠르다.(빠른 사용자 경험)

 

3) 세 번째 요청 - 캐시 시간 초과

브라우저에서 GET /star.jpg 세번째 요청을 하기전 먼저 브라우저 캐시에 요청을 보내고 캐시 유효 시간을 검증한다.

캐시 유효 시간(60초)가 지났다면 브라우저에서 GET /star.jpg 세번째 요청을 서버에 보낸다.

서버는 첫번째 요청이 들어왔을 때와 동일하게 최대 캐시 유효시간을 설정하여  HTTP 헤더(0.1M) + HTTP 바디=star.jpg 이미지(1.0M)를 담아 응답을 보낸다. 

브라우저 캐시(브라우저에 캐시를 저장하는 저장소)에 60초 유효상태로 응답 결과를 다시 저장한다.

 

<캐시 시간 초과>

- 캐시 유효 시간이 초과하면, 서버를 통해 데이터를 다시 조회하고, 캐시를 갱신한다.

- 이때 다시 네트워크 다운로드가 발생한다.

만약 클라이언트(캐시)와 서버가 갖고 있는 데이터가 같은데 캐시 유효시간이 만료되었다면, 또 해당 데이터를 네트워크를 통해 서버로부터 직접 다운 받아야 할까? 그것은 너무 낭비 아닌가? 에 대한 의문을 다음 글에서 해결해보도록 한다.

---

8-1. 캐시 기본 동작 질문 정리

Q. 캐시와 쿠키의 차이

1) 쿠키는 서버의 필요에 의해 클라이언트에 저장하는 데이터이고

2) 캐시는 클라이언트 자체에서 페이지 로드를 효율적으로 하기 위해 저장하는 데이터이다.

[출처] https://www.inflearn.com/questions/426308