[NextJS] useSWRInfinite 무한스크롤 사용 시 첫 번째 페이지를 항상 가져오는 문제

 

무한 스크롤을 구현하고자 useSWRInfinite를 사용하여 구현하였다.

 

다만, F12로 네트워크 탭을 확인해보니 1페이지 2페이지, 1페이지 3페이지, 1페이지 4페이지, ...

 

위와 같이 가져와지는 문제점이 있었다.

 

getKey의 구현이 잘못되었나? 한참 디버깅하고 혹시 debounce나 throttling을 걸면 해결할 수 있을까? 싶어서 구현했는데 여전히 1페이지를 호출하고 있었다.

 

https://swr.vercel.app/ko/docs/pagination#parameters

페이지네이션 – SWR

따라서 공식문서를 살펴보았는데

revalidateFirstPage 해당 옵션이 1페이지를 항시 가져오는 옵션이었고 default가 true로 설정되어있음을 확인하였다.

 

 

 

따라서 위와 같이 false로 설정해준다.

 

 

이제 1페이지를 매번 호출하지 않게 되었다. 

 

다만, 해당 옵션이 true로 기본값을 설정되어있는 것에는 다 이유가 있지 않을까? 

 

추측으로는 새로운 페이지를 불러오는 동안 첫 페이지또한 최신화를 시켜주는 목적일 것 같다.

 

따라서 항상 재검증하여 최신 데이터를 유지함을 목적으로 두는 것인데 트래픽과 최신 데이터에 대한 트레이드 오프가 있는 것 같다.

 

다만, 현재는 작은 토이 프로젝트이기에 false로 설정해두도록 하겠다.