인피니티 스크롤 시 데이터 일부를 가져오지 못하는 문제

Slack 클론 코딩[실시간 채팅 with React]

리버스 인피니트 스크롤링(useSWRInfinite)

작성

275

채팅방에서 새로운 데이터를 입력한 후, 스크롤을 위로 올려 다음 페이지를 로드하면 다음 페이지 값의 일부가 사라져서 출력되는 것 같습니다.

사진에서 5를 새로 입력했습니다. 그리고 나서 위에 닿을 때까지 천천히 스크롤하여 새로운 페이지를 불러오면

8 다음에 있어야 할 9를 불러오지 못했습니다.

테스트는 강좌 깃헙의 front 폴더와 back 폴더에 있는 코드로 진행 했습니다.

버그인 것인지, 페이지를 불러오는 과정에서 문제가 생긴건지 궁금합니다ㅠㅠ..

답변 1

지식공유자

네 버그라기보다는 skip, limit 방식(페이지 단위 fetch)의 한계입니다. 이를 해결하기 위해서는 커서(lastId) 방식으로 백엔드 코드를 다시 짜야합니다.

게시글이 1~50개까지 있을 때 처음 1~10번을 가져왔는데 새로운 게시글이 추가되어서 11~20번을 가져오는 게 아니라 12~21번을 가져오는 문제입니다.

질문자

감사합니다. lastId 방식 찾아보도록 하겠습니다!

지식공유자

간단히 설명드리자면 지금 방식은 10개 건너뛴다음에 10개씩 가져와 이런 방식이라면 커서 방식은 이 아이디 게시글 뒤엣거 10개 가져와 이런 방식입니다.

인프런 커뮤니티 질문&답변