offset 기반의 pagination

• offset을 아는 경우 offset 위치와 가져올 데이터 개수를 제공함으로써 페이지네이션을 구현할 수 있음

const results = await prisma.post.findMany({
  skip: 3,
  take: 4,
})

• 모든 데이터 값으로 즉시 이동이 가능하고, 게시판 등에서 데이터 정렬 기준에 맞게 페이지를 구성할 수 있다는 장점이 있지만, 처음부터 데이터를 탐색하기 때문에 성능에 부정적인 영향을 미칠 수 있음

Cursor 기반의 pagination

https://www.prisma.io/docs/static/2fd4a37fa5e3775c6510ff17279d6b6c/4c573/cursor-1.png

• 페이지네이션을 구현하는 방법으로 이전의 받아왔던 마지막 데이터의 고유값을 사용하는 방법
• 쿼리 사용시 정렬된 값의 조건을 통해 데이터를 빠르게 확인할 수 있다는 장점이 있지만, unique한 값을 인덱스로 삼아야하며, 특정 페이지로 이동할 수 없다는 단점이 존재함

const secondQueryResults = await prisma.post.findMany({
  take: 4,
  skip: 1, //지정한 데이터부터 결과값 반환이 시작되기 때문에 하나의 데이터를 스킵해야만 함
  // 커서 지정
  cursor: {
    id: myCursor,
  },
  where: {
    title: {
      contains: 'Prisma'
    },
  },
  orderBy: {
    id: 'asc',
  },
})

const lastPostInResults = secondQueryResults[3];
const myCursor = lastPostInResults.id;

반대 방향으로의 페이징

• take값으로 음수를 주면 현재 인덱스의 반대방향의 데이터를 가져올 수 있음

const myOldCursor = 200

const firstQueryResults = await prisma.post.findMany({
  take: -4,
  skip: 1,
  cursor: {
    id: myOldCursor,
  },
  where: {
    title: {
      contains: 'Prisma' /* Optional filter */,
    },
  },
  orderBy: {
    id: 'asc',
  },
})

출처:
https://www.prisma.io/docs/concepts/components/prisma-client/pagination