SWR(useSWR, mutate)

 

SWR

stale(cache) while revalidate.

클라이언트가 어떤 값에 대해 서버를 통해 재검증하는 동안 부실(캐시)값을 사용할 수 있게 해준다.

어떤 값에 대하여 서버까지 다녀와서 확인되기 까지 시간이 걸린다. 그 동안 짐작되는 값으로 보여줘도 큰 문제가 없는 곳에는 대기 시간 없이 사용할 수 있다. 그로 인하여 확인 시기를 조금 늦춰볼 여지가 더 생기며 그로 인하여 동일한 요청이 있다면 취합하여 처리하여 성능 향상 등 효과를 만들 수 있다.

 

사용 문법 예

SWR 기본 사용 예

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

key 인자가 같은 useSWR들은 모두 같은 요청을 보내는 것으로 보고 최적화를 적용한다.
fetcher 인자는 매개변수로 key를 받는 함수이다. 이 함수의 반환값이 useSWR의 반환값 중 data에 해당한다.
option 인자는 해당 useSWR의 옵션을 담은 객체다. 옵션은 공식 문서를 참고.

option 인자를 따로 설정하지 않았다면 여러가지 편리한 기능들이 기본값으로 적용된다.
browser창이 focusing되었을 때 재요청 해준다
network가 끊겼다가 다시 연결되었을 때 재요청 해준다
같은 key를 사용하는 useSWR의 호출이 2초 이내에 여러번 일어났을 경우 1번만 요청한다.
등이 있다.

 

사용예:

Data 가져오기 (useSWR)

 

 

중복처리

위 사용 문법에 key에 해당하는 값이 같다면(post방식에서는 제외) 중복으로 보고 요청을 취합하거나 cache된 값으로 처리할 수 있다.

또한 같은 key로 요청한 컴포넌트들은 반환된 데이터를 서로 공유한다.

 

revalidate

key인자로 실행된 useSWR의 결과로 가지고 있는 cache된 data를 갱신한다는 것.

 

cache동작

key인자로한 useSWR이 호출되고 fetcher가 실행되고, fetcher가 반환한 값(data)은 해당 key를 사용하는 useSWR의 cache가 된다.

이 후 동일 key를 사용하는 useSWR에서 별도의 revalidate요청이 없는 한, 해당 key를 사용하는 useSWR의 data는 caching된 값을 사용한다.

이것이 SWR의 핵심이며 중요한 개념이다.

 

mutate사용

 

mutate는 언제 데이터를 최신화 할 것인지를 컨트롤 할 수 있게 해주는 역할이다.

const data = mutate(key, data, option);

 

key인자는 최신화하고자 하는 useSWR에 들어가는 key인자와 같다. /user라는 key를 사용하는 useSWR을 최신화하려 한다면 /user를 key 인자로 주면 된다.
data 인자는 해당 useSWR을 최신화하기 위한 data로 useSWR의 cache를 data로 바꾼다.

option값 참고: https://swr.vercel.app/ko/docs/mutation#optimistic-updates

 

만약, data 인자를 넘겨주지 않고 mutate를 호출한다면 해당 useSWR을 revalidate 하는 동작만 한다.

 

 

mutate와 key바인딩

mutate를 얻는 경로는 useSWR와 useSWRConfig를 통해서 얻을 수 있다.

useSWRConfig에서 mutate라는 함수를 얻을 경우 사용할 때 반드시 key인자를 입력해야 한다.

useSWR의 반환값 중에 하나로 mutate라는 함수를 얻을 수 있다. 여기에서 얻은 mutate에는 key가 바인딩 되어있다.

 

const { mutate } = useSWRConfig();
//...
mutate('/api/user', func1(user), options);