useSWR에는 크게 3가지의 hook들이 있다.
1. useSWR
2. useSWRInfinite
3. useSWRImmutable(1.@ 버전부터 제공)
useSWR은 Next.JS에서 csr로 페이지를 만들고자 할 때 없어서는 안될 hook이라고도 말할 수 있을 정도로 사용했을 때 얻는 퍼포먼스, 편의성이 엄청나게 크다.
먼저 useSWR은 유저가 페이지에 머물거나 다른 페이지에 있다가 페이지로 다시 돌아왔을때, 네트워크가 끊겼다가 다시 복구가 되었을 때 설정해놓은 key값으로 get요청을 보내 데이터를 다시 revalidate한다는 점이 핵심적인 feature라고 말할 수 있다. 이 때 data 값을 useSWR이 알아서 캐싱하게 되고 만약 새로 불러온 값이 기존에 캐싱된 값과 같다면 따로 component를 re-render시키지 않고 다르다면 re-render시켜주는 역할을 해주게된다.
useSWR의 이름 그대로 stale-while-revalidate이 swr의 전부라고 말할 수 있다.
첫 번째 가장 기본 hook인 useSWR이 바로 이 역할을 해준다. useSWR은 data를 불러오는 동안은 data의 값을 undefined로 만들고 데이터가 들어오면 이를 data에 명시해준다 여기서 발생하는 한 가지 단점으로는 옵션을 통해 fallbackdata를 미리 넣어줄 수 있는데 이 때 fallbackdata가 있어서 data의 값이 절대로 undefined가 될 수 없음에도 불구하고 typescript에서 data가 undefined일수도 있다고 말하게된다. 이는 명백한 useSWR의 타입 definition 에러라고 말할 수 있다. 이 부분에 대해 꽤 예전에 불편함을 느껴서 swr git에 issue를 열어놓은 상태이다. (하지만 아직 해결되지 않았다.) 어쨋든 이런 사소한 단점 말고는 swr에서 단점이라고 말할 수 있는 부분은 아직 딱히 느끼지 못했다.
두 번째로 useSWRInfinite라는 hook이 있다. 이는 무한스크롤, Loadmore버튼 과 같이 데이터를 추가적으로 계속 불러오고자 할 때 사용하기 적절한 hook이다. useSWRInfinite에는 size,setSize라는 추가적인 변수를 가져올 수 있다. 이후 서버쪽에서는 적절하게 page를 받아 0페이지면 20개 1페이지면 다음 20개의 데이터를 response할 수 있도록 만들어준다. 이후 size와 setSize를 사용하여 query로 size는 페이지 값으로 전달하며 setSize는 스크롤이 맨 아래로 내려가거나 loadmore버튼을 눌렀을 때 1씩 증가시켜주면 정상적으로 동작한다면 데이터의 마지막까지 계속 데이터를 받아올 수 있게 된다. 이 때 데이터는 useSWR과는 다르게 배열로 감싸져서 [[1페이지데이터],[2페이지],[3페이지]]와 같은 형태로 반환이 되게 되며 이를 map 함수를 사용하여 적절하게 render시킨다면 무한스크롤 구현이 완료되게 된다.
useSWR의 마지막 hook인 useSWRImmutable은 useSWR 1.@버전 이상부터 release된 feature이다. useSWRImmutable은 이름 그대로 첫 데이터를 가져온 다음 다시는 데이터를 revalidate하지 않게된다. 이는 원래의 SWR에서도 옵션값으로 revalidateIfStale, revalidateOnFocus, revalidateOnReconnect값을 모두 false를 준다면 완벽하게 똑같이 동작하도록 구현할 수 있었으며 Immutable을 사용한다면 별다른 옵션 값 없이도 위의 옵션을 입력한것과 동일하게 동작하게된다.
몇 달전 useSWR을 useContext처럼 사용할 수 있도록 하는 재미있는 사용법이 발견되었다. 이를 사용한다면 useSWR을 사용하여 state를 set할 수 있고 이를 다른 페이지에서도 바로 불러와서 사용해 context를 대체할 수 있게된다.
