[SWR] 무한스크롤 구현할 때 useSWRInfinite에서 항상 첫 페이지를 다시 불러오는 문제

문제

React에서 SWR 사용중 무한스크롤을 구현할 때, useSWRInfinite를 써서 구현할 수 있다. 이 때, 네트워트탭을 보면 이상한 점이 보인다.(중간 sentry는 무시)

이미지를 보면 최초 1페이지를 요청 후, 스크롤을 내려 2페이지를 요청할 때, 또 1페이지를 부른다. 그 후 3페이지를 요청할 때도 마찬가지로 1페이지를 다시 요청한다. (왜 그러지..?)

원인

SWR 깃허브의 유사한 이슈들과 공식 문서를 확인 결과, SWR에서는 관련된 옵션을 제공하고 있었다.

revalidateFirstPage

revalidateFirstPage 옵션은 무한스크롤 요청시마다 첫 페이지의 유효성을 검사할건지를 선택하는 옵션이며, 기본적으로 true로 활성화 되어있다. 예를 들어, 1페이지를 요청 후 2페이지를 요청할 때 1페이지의 데이터가 이미 최신이 아닐 경우가 있을 수 있다. 이 때 옵션이 활성화 되어 있다면 다시 1페이지를 요청하여 최신화 시킨다.

만약에 총 3페이지일 경우, 3페이지를 불러올 때 1페이지가 최신 데이터가 아니라면, 최신화 시킴과 동시에 2페이지도 갱신된다.(이미 최신 데이터라면 1페이지만 요청 후 끝낸다.)

해결

결론적으로, revalidateFirstPage 옵션을 비활성화해서 문제를 해결할 수 있었다.

const options = {
  revalidateFirstPage: false
}

const { data } = useSWRInfinite(getKey, fetcher, options);

이제 요청때마다 첫 페이지를 갱신하지 않고 필요한 페이지만 딱 요청을 한다 :)

그 후...

공식 문서를 본다 하더라도 문서의 설명만으로는 이해가 쉽게 되지 않는 내용도 존재한다. 이번 문제는 해당 옵션을 잘 이해하지 못해 발생했다는 생각이 든다.

이후 해당 옵션이 필요한가를 고민하고, 옵션을 활성화하는 방향으로 결정했다 🙃.. 중요한 점은, 무조건 해당 옵션을 끄는 것만이 답은 아니라는 것이다. 예를 들어 데이터가 항상 최신화되어 있어야하는 서비스라면, 목록 노출 전략에 따라 옵션을 켜야한다.

---

[참고]

• SWR 공식 문서
• https://github.com/vercel/swr/discussions/1612
• https://github.com/vercel/swr/issues/1401
• https://github.com/vercel/swr/issues/1552