TIL : 캐시와 fetch api 통신 이슈

문제 상황 : 서버에서 더 이상 응답하지 않는 값을 통신해오는 fetch api

클라이언트에서 fetch로 데이터를 가져오려고 한다.

이전에 테스트 삼아 기입했던 { text: 'hello' }  json 객체를 받아오고 있다.

 

문제는 현재 서버에서는 보내고 있는 데이터가 아니라는 점이다.

 

예를 들어,

내가 B 데이터를 보내고 있는데, 클라이언트쪽에서는 A데이터를 받았다고 응답하는 상황이다.

예전에 B 데이터를 보낸 적은 있었지만, 현재는 더 이상 보내고 있지 않고 있다.

 

서버에서 보내주는 데이터의 값을 다른 것으로 바꾸어 봐도 동일하게 { text: 'hello' } 를 받아온다. 

이상하다 서버쪽, 아니 전체 소스코드에는 더 이상 text:'hello'가 없는데도 말이다. 

 

문제 원인 : 클라이언트의 캐시 문제

웹 브라우저에서 요청을 하면, 응답이 캐시될 수 있다.

 

이전에 이전에 요청하면서 받았던 { text: 'hello' }  json 객체가 캐시되었기 때문에

더 이상 보내지 않음에도 이에 대한 응답을 지속적으로 받게 되었던 것이다.

 

해결 방법 : fetch api에 cache 저장x 옵션 주기

이 경우 cache 옵션을 추가 하는 대신, 웹 브라우저에 캐시를 지우고 다시 통신을 할 수도 있다.

 

브라우저의 캐시를 지우는 것은 임시방편의 방법이고,

나중에도 동일한 현상이 발생할 수 있기에 cahe: 'no-store' 옵션을 추가하고

지금과 같은 문제상황을 미연에 방지하기로 한다.

 

 

이제 잘 받아올 수 있게 되었다.

 

개발자 도구나 다른 브라우저로 한 번 테스트해봤으면 더 빨리 파악했을 것 같다.