[TIL] api로 불러온 게시글 뜨다 안뜨다 에러 해결

네트워크 탭에서 확인해보면 캐시를 중복으로 불러오면서 충돌이 나는 것 같다.

api 요청할때 캐시를 거부하기로한다.

장단점이 있지만 캐시를 안저장하면 호출 할때마다 새로 정보를 받아들이기 때문에 오류는 없겠지만,
변경되는 정보가 적음에도 다 받아와야하기 때문에 속도나 데이터가 많이 발생한다.

일단 오류는 해결하기에 캐쉬 날리기로 결정

vue나 react였을 때는 ajax로 가져왔는데 "cache : false" 옵션 추가

fecth 이용시

fetch('/api/...', {
  method: 'POST',
  headers: {
    "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
  },
  cache: "no-cache",
  body: formBody
})
  .then(function (response) { 
  return response.json()
})
  .then(function (data) {
  ...

출처

let promise = fetch(url, {
  method: "GET", // POST, PUT, DELETE, etc.
  headers: {
    // the content type header value is usually auto-set
    // depending on the request body
    "Content-Type": "text/plain;charset=UTF-8"
  },
  body: undefined // string, FormData, Blob, BufferSource, or URLSearchParams
  referrer: "about:client", // or "" to send no Referer header,
  // or an url from the current origin
  referrerPolicy: "no-referrer-when-downgrade", // no-referrer, origin, same-origin...
  mode: "cors", // same-origin, no-cors
  credentials: "same-origin", // omit, include
  cache: "default", // no-store, reload, no-cache, force-cache, or only-if-cached
  redirect: "follow", // manual, error
  integrity: "", // a hash, like "sha256-abcdef1234567890"
  keepalive: false, // true
  signal: undefined, // AbortController to abort request
  window: window // null
});

https://ko.javascript.info/fetch-api