Posts DB 페이징 기법
Post
Cancel

DB 페이징 기법

페이징

DB 에서 페이징을 구현하는 방법


오프셋 페이징

limit과 offset을 활용하여 페이징을 구현하는 방법.

SELECT * FROM table
ORDER BY timestamp
OFFSET 10
LIMIT 5


장점

  • 구현이 간단하다.

단점

  • Offset을 정말로 건너 뛰는 게 아니라, 한번은 읽는다. 따라서 만약 Offset이 100만이라면, 100만개의 데이터를 읽고 그다음 Limit으로 할당된 데이터를 읽는다.
  • 사용자가 다음 페이지로 넘어가기 전에 새로운 데이터가 입력된다면, 다음 페이지에서 중복데이터가 보일 수 있다.
  • 사용자가 다음 페이지로 넘어가기 전에, 현재 페이지의 데이터가 몇 개 삭제된다면, 다음페이지에서 상단 몇 개의 데이터는 누락된다.


커서 페이징

오프셋 페이징의 단점을 해결할 수 있는 페이징 기법.

클라이언트가 가져간 마지막 row의 다음 row들을 n개 요청하는 방법이다. id 또는 타임스탬프를 기준으로 정렬하고, LIMIT을 거는 방법을 사용한다.

SELECT id, title
  FROM `post`
  WHERE id < (Id Cursor : 996)
  ORDER BY id DESC
  LIMIT 5

이때 사용자 쪽에서는 두 번째 페이지 이상을 조회할 시 기준이 되는 값을 같이 보내줘야 한다.

스크린샷 2020-09-08 오후 9 51 23


장점

  • 새로 생성되거나 삭제되는 데이터가 많아도, 사용자에게 중복되거나 누락된 데이터를 보여주지 않는다.
  • 데이터가 많아도, 매우 빠르게 조회가 가능하다.

단점

  • 정렬할 컬럼에 중복된 값이 존재하면 안되고, 순차적이어야한다.
  • 무한 스크롤이 아닌 경우 구현이 어렵다.


페이지 스킵 구현법

  • 미리 몇개의 페이지를 가져오기
  • SKIP 된 만큼 LIMIT을 주고 마지막 10개 또는 20개만 반환하는 방식.


출처

https://wonyong-jang.github.io/database/2020/09/06/DB-Pagination.html

https://uxdesign.cc/why-facebook-says-cursor-pagination-is-the-greatest-d6b98d86b6c0

This post is licensed under CC BY 4.0 by the author.

자바스크립트 실행 컨텍스트

React-query 에서 cache를 사용하는 방법

Comments powered by Disqus.