HTTP 캐싱 설정

 

회사에서 개발을 하면서 페이지 번호를 req.query로 서버 API로 보내 페이징처리 된 게시물들을 가져오고 있었는데 1-> 2 -> 3-> 4-> 5 -> 4 ->3  페이지 이렇게 페이지를 계속 바꾸면서 테스트를 진행하는 중에

 

request failed with 304 라는 에러가 났다.

 

api 호출은 axios 라는 라이브러리를 사용해서 했는데, axios는 찾아봐야겠지만

 

fetch API와 같은 경우에는 리액트에서 동일한 요청을 몇 초 이내에 하면 원래 캐싱해놓았던 값을 리턴하고 api call을 하지 않는다.

 

문득 토스 개발 블로그에서 본 "웹 서비스 캐시 똑똑하게 다루기" 라는 글이 떠올라서

 

요청 헤더에 

 

'Cache-Control': 'no-cache'

 

이렇게 설정한 후 테스트를 진행했더니 request failed with 304 에러가 더 이상 뜨지 않았다.

 

 

참고자료

 

https://toss.tech/article/smart-web-service-cache