카테고리 없음

TIL 2021-09-30 My SQL Pagination

강에 뜨는 달 2021. 9. 30. 23:15
Offset Pagination

 

우리가 흔히 사용하는

 

/post/?page=1

등이 Offset을 통한 페이지네이션의 예시

SELECT id FROM `products` ORDER BY id DESC LIMIT 20, 40

LIMIT A,B의 형태에서

 

A는 건너뛸 Offset 개수,

 

B는 가져올 row 개수를 의미한다.

 

그래서 만약 한 페이지에서 20개의 데이터를 가져온다면

 

const query = 'SELECT id FROM products ORDER BY id DESC LIMIT ' + (20 * (page-1)) + ', ' + 20;

라는 쿼리 구문을 통해서 페이지 데이터를 가져올수 있는 것이다.

 

 

정말정말 쉽다 와!

 

 

문제점

 

새로운 데이터가 들어왓을떄 중복된 데이터를 받을 가능성

 

한 페이지에 20개의 데이터를 보여준다고 가정하자.

 

1페이지를 보고 2페이지로 넘어갔는데, 그 사이 20개의 새로운 데이터가 데이터베이스에 저장된다면

 

사용자는 2페이지에서 봤던 데이터들을 다시 보게 됨!!

 

퍼포먼스 이슈

 

높은 Offset은 퍼포먼스가 구리다.

 

만약 LIMIT 50000, 20,을 한다면 데이터베이스 상에서는 50000를 슈우우욱 흟고 넘어가 그 다음 50020까지를 긁어오게 되므로 너무나 비효율적이다.

 

Offset을 효율적으로 사용하는 방법으로는

 

Seek Method를 사용하는 것이다.

 

Cursor based Pagination
SELECT    *
FROM
    events
WHERE
    date>='2010-07-12T10:29:47-07:00' and not (date='2010-07-12T10:29:47-07:00' and id < 111866)
        AND event = 'editstart'
ORDER BY date, id
LIMIT 10

위와 같이 기준점이 될 유니크한 값을 기점으로 그 이후의 것들을 탐색하는 것이다.

 

 

 

 

Reference

 

 

https://velog.io/@minsangk/%EC%BB%A4%EC%84%9C-%EA%B8%B0%EB%B0%98-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%84%A4%EC%9D%B4%EC%85%98-Cursor-based-Pagination-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

 

커서 기반 페이지네이션 (Cursor-based Pagination) 구현하기

사실 처음에는 이 주제로 포스트를 쓰려고 했던건 아니고 Apollo GraphQL 에서 커서 기반 페이지네이션 구현 을 주제로 글을 쓰려고 했습니다. 그런데 막상 찾아보니 백엔드-프론트엔드를 함께 고려

velog.io