문제 내용
Next.js 환경에서 Fetch API를 사용해 Postman에 생성된 Mock Sever로 데이터를 요청하는 테스트를 진행했습니다. 테스트는 순조롭게 진행 되는 듯 했으나 Postman에서 데이터를 수정하면서 문제가 발생했습니다.
응답 데이터 일부를 수정했음에도 불구하고 수정된 데이터를 응답하는 게 아니라 수정 전 데이터를 응답하는 문제가 발생했습니다.
해결 과정
처음에는 Postman 문제일 것이라 생각하고, API 요청 시 params를 다르게 해 봤습니다.
params의 cursor_id를 기존 1에서 사용한 적 없는 값인 10으로 변경하니 변경된 데이터가 잘 가져와졌습니다. 하지만 다시 데이터를 변경하니 변경된 데이터가 아니라 변경 직전 데이터를 응답했습니다.
그리고 Postman에서는 요청 로그를 볼 수 있는 페이지가 있는데 해당 페이지를 통해 이전에 요청한 적이 있는 URL에 대한 요청은 로그가 남아있지 않았습니다.
이를 통해 캐시 관련 문제라고 생각을 하게 되었고 Postman이 아닌 클라이언트 측에서 문제를 해결하기로 했습니다.
Fetch API에는 가져온 데이터에 대한 캐시를 제어할 수 있는 옵션이 있습니다.
fetch(`https://...`, { cache: 'force-cache' | 'no-store' })기본값은 force-cache 인데, 이 값은 요청하는 URL이 예전에 요청한 적 있는 URL이라면 먼제 캐시에서 stale하지 않은 데이터가 있는지 확인하고 있으면 해당 데이터를 캐시에서 반환합니다. 즉, 원격 저장소에 요청을 하지 않고 브라우저 캐시에서 꺼내 주기 때문에 Postman Mock Server로 요청이 가지 않았던 것입니다.
Fetch API를 사용하여 데이터를 요청할 때 no-store를 cache 옵션 값으로 사용하면 캐시에 방문하지 않고 항상 원격 저장소에 데이터를 요청하고 다운로드 해 오며, 다운로드 한 데이터는 캐시에 저장하지 않습니다. 즉, 요청 데이터에 대해 항상 최신 데이터를 응답 받을 수 있게 됩니다.
그러나 모든 요청에 대해 no-store를 설정한다면 업데이트가 거의 발생하지 않는 데이터에 대해서도 매번 원격 저장소에 요청을 하여 불필요한 트래픽을 발생시키기 때문에 데이터의 특성과 업데이트 빈도에 따라서 캐시 컨트롤이 필요합니다.
