← 전체 글로 돌아가기

웹 개발

배포 후 페이지네이션 데이터가 안 나올 때

페이지네이션이 있는 페이지를 배포한 후 특정 페이지에서 데이터가 보이지 않을 때의 해결 방법.

페이지네이션 기능이 있는 페이지를 배포하면, 로컬에선 잘 작동하지만 운영에서 특정 페이지의 데이터가 안 보이는 경우가 있다. 이는 주로 쿼리 파라미터 처리, 캐싱, 또는 데이터베이스 상태의 차이 때문이다.

사용자 영향 파악

문제가 모든 페이지에서 나타나는지, 특정 페이지에서만 나타나는지 확인한다.

  • 첫 번째 페이지 (page=1)는 정상인가
  • 두 번째 페이지 (page=2)부터 문제가 나타나는가
  • 특정 필터나 정렬과 함께 사용할 때만 문제가 나타나는가

쿼리 파라미터 확인

URL을 다양한 조합으로 테스트한다.

npm run build

빌드 후 배포된 페이지에서:

  • /items → 첫 페이지
  • /items?page=2 → 두 번째 페이지
  • /items?page=2&sort=date → 정렬과 함께

각 조합이 정상적으로 동작하는지 확인한다.

캐싱 문제

페이지가 static으로 생성되었다면, 캐시된 결과를 제공할 수 있다. 만약 동적 파라미터(page)를 무시하면 같은 HTML을 모든 페이지에 보여줄 것이다.

  • Next.js의 getStaticPropsgetStaticPaths가 올바르게 구성되었는가
  • 동적 라우팅이 [page].js 형태로 되어 있는가
  • 또는 ISR(Incremental Static Regeneration)이 설정되어 있는가

데이터 일관성

로컬과 운영의 데이터가 다를 수 있다.

  1. 총 아이템 개수 확인
  2. 페이지당 아이템 개수 설정이 같은가
  3. 정렬 순서가 예상과 같은가
  4. 필터 조건이 제대로 적용되는가

수정 후 확인

  1. 원래 증상이 같은 조건에서 다시 나타나는지 재현
  2. 공개 URL에서 각 페이지를 번갈아가며 접속해서 올바른 데이터가 로드되는지 확인
  3. 빌드 결과에서 모든 페이지가 정상적으로 생성되었는지 확인

다음을 위한 기록

페이지네이션 문제를 만난 후에는, 다음에 비슷한 상황이 나올 때를 대비해서 확인 순서를 메모해두면 좋다. 같은 문제를 반복해서 디버깅하는 것보다 패턴을 인식하는 게 훨씬 빠르다.