Optimization - Cache 사용하기
- 캐시(Cache) 란 다운로드 받은 데이터나 값을 임시저장해놓는 장소이다. 데이터에 접근하는 시간이 오래걸릴경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다.
사진과 같이 동일한데이터를 또다시 요청하면 데이터의 전체를 다시 받아오는게 아닌 HTTP헤더의 용량만 받으면 속도면에서 훨씬 절약이 될것이다.
캐시사용하기
서버에서 응답을 보내줄때 이미지파일과 함께 헤더에 Cache-Control 을 작성해서 보내준다. 사진상에선 이미지 파일이 60초동안 유효 하다는것을 의미한다.
두번쨰 요청부턴 캐시를 먼저 조회하게된다. 캐시를 먼저 조회한후 만약 60초가 지나지않고 이미지파일이 유효하다면 해당 파일을 가져와 사용한다.
60초가 지나면 다시 서버에서 파일을 받아온다.
캐시 검증 헤더와 조건부 요청
캐시에 보관되어있는 파일의 유효기간이 끝났다고해서 똑같은파일을 요청하는데 다시 서버에서 응답을 다 받아오는것은 비효율적인 방법입니다. 이런상황을 해결할 수 있는 방법이 캐시 검증 헤더와 조건부 요청 헤더입니다.
캐시 검증 헤더
캐시에 저장된 데이터와 서버의 데이터가 동일한지 확인하기 위한 정보를 담은 응답 헤더
- Last-Modified : 데이터가 마지막으로 수정된 시점을 의미하는 응답 헤더로, 조건부 요청 헤더인 If-Modified-Since 와 묶어서 사용합니다.
- Etag : 데이터의 버전을 의미하는 응답 헤더로, 조건부 요청 헤더인 If-None-Match 와 묶어서 사용합니다.
조건부 요청 헤더
캐시의 데이터와 서버의 데이터가 동일하다면 재사용하게 해달라는 의미의 요청 헤더
- If-Modified-Since : 캐시된 리소스의 Last-Modified 값 이후에 서버 리소스가 수정되었는지 확인하고, 수정되지 않았다면 캐시된 리소스를 사용합니다.
- If-None-Match : 캐시된 리소스의 ETag 값과 현재 서버 리소스의 ETag 값이 같은지 확인하고, 같으면 캐시된 리소스를 사용합니다.
-
Last-Modified 와 If-Modified-Since
첫 번째 요청을 보내고 응답을 받으면서 캐시 유효 시간이 60초인 이미지 파일을 같이 받아옵니다. 이 때, 서버의 파일이 마지막으로 수정된 시간을 의미하는 Last-Modified 헤더에 담긴 내용도 캐시에 함께 저장합니다.
-
Etag 와 If-None-Match
첫 번째 요청을 보내고 응답을 받으면서 캐시 유효 시간이 60초인 이미지 파일을 같이 받아옵니다. 이 때, 서버의 파일 버전을 의미하는 Etag 헤더에 담긴 내용도 캐시에 함께 저장합니다.
캐시 유효 시간인 60초를 초과한 후에 두 번째 요청을 보낸다고 해봅시다. 비록 유효 시간이 지났어도 해당 데이터를 재사용해도 되는지 확인하기 위해서 “내가 캐시에 저장해놓은 데이터 버전이랑 서버 데이터 버전이랑 일치하니? 일치한다면 캐시에 저장해놓은 데이터를 재사용해도 괜찮을까?”라는 뜻의 요청 헤더 If-None-Match 를 작성하고 캐시에 함께 저장해놓았던 Etag 값을 담아 요청을 보냅니다. 이 값을 이용해 서버 데이터의 Etag 와 캐시에 저장된 데이터의 Etag 를 비교합니다. 두 데이터가 동일한 데이터라면 두 Etag 값이 같아야 합니다.
서버와 캐시의 데이터가 동일한 데이터임이 검증되었다면 서버는 “데이터가 수정되지 않았음”을 의미하는 304 Not Modified 라는 응답을 보내주고, 캐시 데이터의 유효 시간이 갱신되면서 해당 데이터를 재사용할 수 있게 됩니다.
여기까지 두 쌍의 캐시 검증 헤더와 조건부 요청 헤더를 알아보았습니다. 두 쌍중의 헤더 중 한 쌍만 사용할 수도 있지만, 보통 두 종류를 동시에 사용합니다. 둘 중 하나만 사용했다가 매칭되는 응답 헤더가 없는 경우에는 재사용할 수 있는 경우에도 리소스를 다시 받아와야 하는 경우가 생길 수 있기 때문입니다.
출처: 코드스테이츠
