페이지 네이션이란
한정된 네트워크 자원을 효율적으로 활용하기 위해 특정한 정렬 기준에 따라 데이터를 분할하여 가져오는 것이다
1. 오프셋 기반 페이지네이션(Offset-based Pagination)
- DB의 offset쿼리를 사용하여 ‘페이지’ 단위로 구분하여 요청/응답
2. 커서 기반 페이지네이션(Cursor-based Pagination)
- Cursor 개념을 사용하여 사용자에게 응답해준 마지막 데이터 기준으로 다음 n개 요청/응답
1. Offset-based Pagination
백엔드에서는 만약 MySQL 에서라면 간단하게 OFFSET 쿼리와 LIMIT 쿼리에 콤마를 붙여 '건너 뛸' row 숫자를 지정하여 페이지네이션을 구현한다. 즉, 페이지 단위로 구분한다.
요청한 데이터를 바로 조회하는 것이 아니라, 이전의 데이터를 모두 조회하고 그 ResultSet에서 오프셋을 조건으로 잘라내는 것이다. 오라클 쿼리로 볼수 있다
/article/?offset=10&limit=10
문제 1) 페이지 요청사이 데이터 변화가 있는 경우 중복 데이터 발생
전통적인 페이지네이션은 오랜 기간 잘 작동해왔지만 페이스북이나 인스타그램과 같은 잦은 수정, 생성, 삭제가 반복되는 서비스에서는 더 이상 효율적으로 작동하지 못한다
=>,1페이지에서 20개의 row를 불러와서 유저에게 1페이지를 띄워주었다. 고객이 1페이지의 상품들을 보고 있는 사이, 상품 운영팀에서 5개의 상품을 새로 올린다면유저가 1페이지 상품을 다 둘러보고 2페이지를 눌렀을때 1페이지에서 보았던 상품 20개중 마지막 5개를 다시 2페이지에서 만나게 된다. (등록일 기준 내림차순이므로)
반대로 5개 상품을 삭제했다면 2페이지로 넘어갔을때 고객은 5개의 상품을 보지 못하게된다!
문제 2) 대부분의 RDBMS에서 OFFSET 쿼리의 퍼포먼스 이슈
극단적으로 10억번째 페이지에 있는 값을 찾고 싶다면 OFFSET 또는 skip에 매우 큰 숫자가 들어가게 된다.
즉, 정렬기준(order by)에 대해 해당 row가 몇 번째 순서인지 알지 못하므로 OFFSET 값을 지정하여 쿼리를 한다고 했을 때 지정된 OFFSET까지 모두 만들어 놓은 후 지정된 갯수를 순회하여 자르는 방식이다. 때문에 퍼포먼스는 이에 비례하여 떨어지게 되어 있다.
2. Cursor based Pagination
Offset 기반 페이지네이션은 우리가 원하는 데이터가 ‘몇 번째’에 있다는 데에 집중하고 있다면, 커서 기반 페이지네이션은 우리가 원하는 데이터가 '어떤 데이터의 다음'에 있다는데에 집중한다.
=> n개의 row를 skip 한 다음 10개 주세요가 아니라, 이 row 다음꺼부터 10개 주세요를 요청한다=>책갈피 같은 느낌?
/article/?cursor=1&limit=10
'React' 카테고리의 다른 글
중복 submit방지 ( Lodash throttle & debounce) (0) | 2023.02.05 |
---|---|
데이터 요청(axios)로구현한 페이지 네이션 (0) | 2023.01.23 |
useEffect 와 useLayoutEffect (0) | 2023.01.15 |
Intersection Observer API 과 무한스크롤 구현 (0) | 2023.01.08 |
redux persist (0) | 2022.12.19 |