페이지네이션 쿼리 성능을 배포 전에 확인하기

페이지네이션 기능이 있는 페이지는, 한 번에 모든 데이터를 로드하지 않으므로 성능상 이점이 있다. 하지만 쿼리 작성이 잘못되면 오히려 성능을 해칠 수 있다.

정상 상태부터 정의한다

첫 페이지(1번)에서는 빠르게 로드되지만, 마지막 페이지(예: 1000번)에서는 느려지는지 확인해야 한다. OFFSET 기반 페이지네이션은 높은 번호로 갈수록 느려질 수 있다. 이런 성능 특성을 미리 파악하고 대안(cursor-based pagination 등)을 검토해야 한다.

로컬에서 프로덕션 빌드로 테스트한다

npm run build

개발 서버에서는 데이터가 메모리에 캐시되어 있을 수 있다. 프로덕션 빌드에서는 데이터베이스 쿼리가 매번 실행되므로, 실제 성능을 확인할 수 있다.

대량의 테스트 데이터로 확인한다

페이지네이션은 데이터가 적을 때는 문제가 없지만, 몇만 건 이상이 되면 버그가 드러난다. 로컬 개발 환경에 대량의 테스트 데이터를 먼저 생성해서 성능을 확인한다.

쿼리와 인덱스를 검토한다

ORDER BY와 LIMIT 구간이 인덱스를 제대로 활용하는지 확인한다. 데이터베이스 쿼리 분석 도구(EXPLAIN 등)를 사용해서 쿼리 실행 계획을 살펴본다.

페이지 번호 입력 시 validation을 확인한다

사용자가 존재하지 않는 페이지 번호를 입력하면 어떻게 동작하는지 확인한다. 에러 페이지를 보여줄지, 첫 페이지로 리다이렉트할지 정해야 한다.

모바일 환경에서 페이지 이동을 확인한다

모바일에서 "다음" 버튼이 눌리기 쉬운 위치에 있는지, 페이지 번호 입력 필드가 작동하는지 확인한다. 느린 네트워크에서도 UI가 갱신되는 중에 여러 번 클릭하면 어떻게 되는지 테스트한다.

페이지 상태를 URL에 반영한다

URL에 현재 페이지 번호를 포함시키면, 사용자가 페이지를 새로고침해도 같은 위치에 있을 수 있다. 예: /posts?page=3

페이지네이션은 사용자 경험에 직접 영향을 미치므로, 배포 전에 충분히 테스트하는 게 중요하다.