SWR

리덕스의 단점 -> 코드가 너무 길어진다.

next.js 에서 만든 SWR

swr은 전역 스토리지 같은 역할을 한다.

 

import useSWR from 'swr'

function Profile () {
  const { data, error } = useSWR('/api/user/123', fetcher)

}

 

* swr의 특징
컴포넌트가 마운트 될 때부터 요청을 보낸다.

자동으로 페이지 로드시 자동갱신이 된다. 즉, 자동으로 계속 서버에게 요청을 보낸다.
서버에게 계속 요청을 보내면 최악. ••

그래서 다양한 options들이 존재한다.
https://swr.vercel.app/ko/docs/options

API 옵션 – SWR

const { data, error, isValidating, mutate,revalidate } = useSWR(key, fetcher, options)

revalidate -> 데이터를 수동으로  서버에 다시 요청(O) 할 수 있는 함수.
mutate -> 서버에 요청(X)하지 않고 data 를 수정할 수 있는 함수.

data --> const {data} = useSWR(key,fetcher,options);

* optimistic ui
먼저 성공한다고 가정하에 데이터 수정 후 요청 하는 것이 옵티미스틱 ui.

mutate(data, shouldRevalidate : boolean);

shouldRevalidate  -> 서버쪽에 요청을 보내서 점검을 희망 한다 -> true.

 

mutate 사용시 
사용자들은 내가 한 action에 대해서 바로바로 반영이 되는 구나!, 착각을 하는것.
서버에 요청이 가기전 데이터를 수정하는 것.
그 후 점검을 위해 shouldRevalidate  : true 설정.
ex) 페이스북 좋아요

 
options

• dedupingInterval = 2000ms  : 이 시간 범위내에 동일 키(API)를 사용하는 요청 중복 제거
  
  - dedupingInterval을 사용하지 않을경우 
    swr이 재요청 하는 기준은 다른 탭을 갔다가 오는 경우 재요청을 보내게 된다.
  
  - dedupingInterval 옵션을 추가하게 되면 그 시간안에는 다른 탭을 갔다와도,
    재요청을 보내지 않는다 이유는 ->  캐시에서 그대로 데이터를 들고 사용하기 때문이다.
    그 시간이 끝나면 다시 재요청을 보낸다.
  
  const {} = useSWR( key, fetcher, {dedupingInterval : 2000 });