[React] SWR 설정

📎  swr을 잘못 사용하면 패킷들을 마구마구 백앤드로 보내서 셀프 DDOS공격을 하는셈이 된다. 이를 막기 위해서 설정을 할 수 있다.

---

내가 원할 때 swr 호출하기

 

revalidate 함수

 

ex) const { data, error, revalidate } = useSWR('http://localhost:3095/api/users', fetcher);

axios
    .post(
      ...
    )
    .then(() => {
        revalidate();
    })
    .catch((error) => {
        ...
    });

 

성공 했을 때 revalidate 호출 해주면 fetcher가 실행된다. 원래 내 정보가 들어있는 data는 revalidate가 실행되면 false가 된다.

---

swr 호출 주기를 늘리기

dedupingInterval

ex) dedupingInterval = 2000     캐시에 저장한 뒤로부터는 2초동안 에는 캐시에서 가져오고, 2초가 지나면 서버에 요청 한번씩 보내기 (컴포넌트가 실행되면 요청을 보내는데 아무리 많은 컴포넌트들이 실행되어도 2초동안에는 서버에는 딱 한번만 요청보내고 나머지들은 첫번째 요청이 성공한것에 대한 데이터를 그대로 가져오겠다는 뜻이다.)

 

focusThrottleInterval

ex) focusThrottleInterval = 5000     revalidate 함수를 5초에 한번씩 제한걸어주기

 

loadingTimeout

ex) loadingTimeout = 3000     요청을 보냈는데 3초가 넘으면 동작함

 

errorRetryInterval

ex) errorRetryInterval = 5000     서버에 요청을 보냈는데 에러가 나면 5초를 기다렸다가 재요청을 보내기

 

errorRetryCount   

최대 몇번까지 재요청이 가능한지 제한하기