웹 개발
배포 후 페이지네이션 데이터가 안 나올 때
페이지네이션이 있는 페이지를 배포한 후 특정 페이지에서 데이터가 보이지 않을 때의 해결 방법.
페이지네이션 기능이 있는 페이지를 배포하면, 로컬에선 잘 작동하지만 운영에서 특정 페이지의 데이터가 안 보이는 경우가 있다. 이는 주로 쿼리 파라미터 처리, 캐싱, 또는 데이터베이스 상태의 차이 때문이다.
사용자 영향 파악
문제가 모든 페이지에서 나타나는지, 특정 페이지에서만 나타나는지 확인한다.
- 첫 번째 페이지 (page=1)는 정상인가
- 두 번째 페이지 (page=2)부터 문제가 나타나는가
- 특정 필터나 정렬과 함께 사용할 때만 문제가 나타나는가
쿼리 파라미터 확인
URL을 다양한 조합으로 테스트한다.
npm run build
빌드 후 배포된 페이지에서:
/items→ 첫 페이지/items?page=2→ 두 번째 페이지/items?page=2&sort=date→ 정렬과 함께
각 조합이 정상적으로 동작하는지 확인한다.
캐싱 문제
페이지가 static으로 생성되었다면, 캐시된 결과를 제공할 수 있다. 만약 동적 파라미터(page)를 무시하면 같은 HTML을 모든 페이지에 보여줄 것이다.
- Next.js의
getStaticProps와getStaticPaths가 올바르게 구성되었는가 - 동적 라우팅이
[page].js형태로 되어 있는가 - 또는 ISR(Incremental Static Regeneration)이 설정되어 있는가
데이터 일관성
로컬과 운영의 데이터가 다를 수 있다.
- 총 아이템 개수 확인
- 페이지당 아이템 개수 설정이 같은가
- 정렬 순서가 예상과 같은가
- 필터 조건이 제대로 적용되는가
수정 후 확인
- 원래 증상이 같은 조건에서 다시 나타나는지 재현
- 공개 URL에서 각 페이지를 번갈아가며 접속해서 올바른 데이터가 로드되는지 확인
- 빌드 결과에서 모든 페이지가 정상적으로 생성되었는지 확인
다음을 위한 기록
페이지네이션 문제를 만난 후에는, 다음에 비슷한 상황이 나올 때를 대비해서 확인 순서를 메모해두면 좋다. 같은 문제를 반복해서 디버깅하는 것보다 패턴을 인식하는 게 훨씬 빠르다.