Offset-based & Cursor-based Pagination

❓ Pagination (페이지네이션)

보통 서버에서 데이터를 가져올 때 모든 데이터를 한번에 가져올 수 없음

따라서 서버의 입장에서도 클라이언트의 입장에서도 특정한 정렬 기준에 따라 + 지정된 갯수 의 데이터를 가져오는 것이 필요

이를 흔히 '페이지네이션(Pagination)'이라고 표현하는데, 페이지네이션은 아래와 같은 두가지 방식으로 처리가 가능함

 

1️⃣ 오프셋 기반 페이지네이션 (Offset-based Pagination)

DB의 offset 쿼리를 사용하여 '페이지' 단위로 구분하여 요청/응답하게 구현

 

2️⃣ 커서 기반 페이지네이션 (Cursor-based Pagination)

클라이언트가 가져간 마지막 row의 순서상 다음 row들을 n개 요청/응답하게 구현

 

---

Offset Pagination으로 페이징하기

offset pagination은 전체 데이터 값에서 👉offset부터 limit까지👈만가져오는 방식

하지만 실무에서는 offset방식은 게시글 추가삭제시 문제가 있어서 사용 안함
(중간에 삭제된 데이터, 추가된 데이터 등 처리가 제대로 안됨)

 

사용 예시 👇

// back/routes/post.js

router.get('/', async (req, res, next) => { // GET /posts
    try {
        const posts = await Post.findAll({
            // 실무에서는 limit offset사용 안함(중간에 삭제된 데이터 처리가 안됨)
            limit: 10,
            offset: 0, // 1~10
            order: [['createdAt', 'DESC']],
        });
        res.status(200).json(posts);
    } catch (error) {
        console.error();
        next(error);  
    };
});

 

---

 

Cursor Pagination으로 페이징하기

 n개의 row를 skip 한 다음 10개 요청하는 것이 아니라, 이 row 다음부터 10개를 요청하는 방식

 

사용 예시 👇

// back/routes/post.js

router.get('/', async (req, res, next) => { // GET /posts
    try {
        const posts = await Post.findAll({
	where: { id: lastId },
            limit: 10,
	order: [['createdAt', 'DESC']], // 최신 게시글부터
        });
        res.status(200).json(posts);
    } catch (error) {
        console.error();
        next(error);  
    };
});