![[knowledge] 페이지네이션 방법론 차이(Offset vs Cursor) [8/12 study]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FU46NT%2FbtsI0DVjOHX%2FAAAAAAAAAAAAAAAAAAAAACYSjh-7BhpLp3flxXDX_0ecIzpWn5J4MuFhkufrDx7i%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DjYzJmdVirjPAMoWH2l0I5GFfBI0%253D)
페이지네이션 방법론 차이(Offset vs Cursor)
Offest Pagination
보통 기본적으로 사용하는 페이지네이션이 Offset기반 페이지네이션 입니다.
사진 보니까 익순하시지 않나요?
각각의 request에 클라이언트는 page_size(offset)와 page_number(limit)를 payload에 실어서 전달합니다.
- Page Size는 반환할 데이터의 개수를 나타냅니다.
- Page Number는 현재 요청중인 페이지를 나타냅니다.
장점
- 총 데이터개수와 Page크기를 알 수 있다.
이는 사용자가 원하는 페이지를 선택하고 바로 그 페이지의 데이터를 볼 수 있다는 것을 의미합니다.
단점
- 데이터가 불일치 할 수 있습니다.
만약 사용자가 어떤 게시물의 1페이지부터 +1 씩 증가하면서 다음 페이지의 데이터를 보는 도중, 게시물이 삭제된다면 페이지의 데이터가 하나씩 앞으로 이동하며 사용자가 보지 못하고 넘어가는 게시물이 생길 수 있습니다.
반대로 게시물이 하나 추가된다면, 사용자는 이전 페이지에서 넘어온 게시물을 한번 더 보게 되는 케이스가 생길 수 있습니다.
Cursor Pagination
Cursor 페이지네이션은 페이스북의 무한 스크롤 또는 더보기 버튼을 클릭해 다음 데이터를 불러오는 방식입니다.
Cursor 페이지네이션은 현재 보고있는 데이터의 마지막 번호인 Cursor와 몇개의 데이터를 불러올 것인지에 대한 page_size 를 통해 서버이 데이터를 호출 할 수 있다.
만약 커서가 제공되지 않는다면 서버는 첫번째 데이터에서 page_size 만큼의 데이터를 가져오게 된다. 만약 server를 통해 받은 데이터의 개수가 page_size 보다 작다면, 데이터의 마지막을 의미합니다.
장점
- 데이터의 추가 삭제에 안정적이다.
이전 offset Pagination 에서와는 다르게 데이터의 추가, 삭제에도 중복된 데이터를 만들거나 데이터를 보지 못하는 케이스가 발생하지 않습니다.
- 대규모 데이터에 적합한 확장성을 가지고 있다.
cursor의 데이터가 인덱싱 되어 있다는 전제하에, database는 cursor를 바로 찾을 수 있고, 원하는 갯수만큼의 데이터를 효율적으로 불러 올 수 있습니다.
데이터의 양이 많아질 수록 offset 페이지네이션에 비해 더 효율 적이다.
단점
- 사용자가 원하는 페이지에 바로 이동할 수 없다.
cursor기반 페이지네이션은 총 데이터의 개수를 알 수 없어, 원하는 페이지로 바로 이동하는 것이 불가능합니다.
- 정렬 기능이 제한된다.
고유(unique)하지 않은 데이터 이름과 같이 중복이 많이 허용되는 데이터로 정렬해야하는 경우, 시간 복잡도가 증가하고 구현하기 어렵습니다.
프론트엔드 공부일지 입니다.
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!