[Querydsl] 무한 스크롤 기능 구현 ( Offset vs No Offest )

Soptmakers에서, 끝말잇기 기능을 구현했다. 처음 MVP는 모든 회차의 끝말잇기 목록을 보이도록 하기로 했다.

무한 스크롤을 구현할때는 limit, cursor, hasNext와 같은 필드가 필요하다.

• limit : 페이지 사이즈
• cursor: 읽고 싶은 행의 데이터 개수
• hasNext: 스크롤 이후 그 뒤의 데이터가 남아있는지 없는지 판단하는 필드

문제점 발생

전체 조회하는 경우에, 중복되는 데이터가 보이게됨

limit은 10

cursor는 10, 20, 30~ 의 값으로 요청

이 과정에서, (0 ~ 10) (10 ~ 20) (20 ~ 30) 중간의 값들이 중복되는 현상 발생

---

📍Offest Based Pagination

@Repository
@RequiredArgsConstructor
public class WordChainGameQueryRepository {

    private final JPAQueryFactory queryFactory;

    public List<WordChainGameRoom> findAllLimitedGameRoom(
            Integer limit, Integer cursor
    ) {
        val room = QWordChainGameRoom.wordChainGameRoom;
        return queryFactory.selectFrom(room)
                .offset(cursor)
                .limit(limit)
                .orderBy(room.id.desc())
                .groupBy(room.id)
                .fetch();
    }
}

cursor에 해당하는 만큼 데이터를 읽어들인 후 limit 만큼의 행을 읽고 앞에 익은 행을 삭제하는 과정을 거치게 됩니다. 

데이터가 많아지면 많아질 수록 읽어야할 데이터의 개수가 많아지게 되며, 데이터베이스에 많은 부하가 생겨 속도 면에서도 느려지게 됩니다.

또한, 새로운 페이지를 가져오는 중간에 새로운 데이터가 삽입되면, 이전 페이지와 중복되는 현상이 발생합니다.

 

order by id desc

최신에서 과거순으로 조회

앞에서 읽었던 행을 다시 읽어야하기 때문에, 페이징 쿼리가 뒤로 갈수록 느려집니다. 

예) offset 10000, limit 10 -? 10010개의 행을 읽고 10000개의 행은 버림.

 

📍No Offest , Cursor Based Pagination

조회 시작 부분을 인덱스로 빠르게 찾아, 매번 첫 페이지만 읽도록 하는 방식.

마지막 조회한 행의 id 값을 기준으로, 읽지 않은 행을 page size 만큼 조회합니다. id라는 클러스터 인덱스를 사용하기 때문에 시작 부분을 빠르게 찾아 조회가 가능합니다. 페이지 번호(offset)가 없는 더보기 방식.

 

프론트 개발자님께 cursor를 조회된 마지막 id를 전송해달라고 수정사항을 요청

첫 조회는 cursor에 0을 보내도록 요청

public List<WordChainGameRoom> findAllLimitedGameRoom(Integer limit, Long cursor) {
	val room = QWordChainGameRoom.wordChainGameRoom;
	return queryFactory.selectFrom(room)
		.where(ltGameRoomId(cursor))
		.limit(limit)
		.orderBy(room.id.desc())
		.groupBy(room.id)
		.fetch();
}

private BooleanExpression ltGameRoomId(Long gameRoomId) {
	val room = QWordChainGameRoom.wordChainGameRoom;
	if(gameRoomId == null || gameRoomId == 0) return null;
		return room.id.lt(gameRoomId);
}

 

👀 Cursor Based Pagination의 한계점

cursor값은 순차적이어야하며, 정렬에 포함되는 하나 이상의 필드는 unique 해야한다.

offset 방식 같은 경우, 스킵할 데이터 수와 limit값만 주어진다면 어떤 쿼리를 수행해도 페이징을 구현할 수 있지만 cursor 방식은 더 많은 제약을 가진다.