UI 패턴과 캐싱 전략에 따른 Cursor vs Offset 최적 설계 가이드

Cursor vs Offset Pagination: A Frontend Engineer's Perspective in 2026

Abdul Halim2026년 6월 2일9분intermediate

AI 요약

Context

RSC 도입과 클라이언트 캐싱 라이브러리의 표준화로 인해 Pagination의 책임이 프론트엔드로 전이된 상황 분석. 단순 DB 쿼리 효율성을 넘어 URL 상태 관리, CDN 캐싱, 사용자 네비게이션 경험이 설계의 핵심 제약 사항으로 부상.

CDN 및 URL 기반 독립적 캐싱이 필요한 데이터 테이블 구조에 Offset Pagination을 적용하여 예측 가능한 Cache Key 설계
무한 스크롤 및 빈번한 데이터 쓰기가 발생하는 피드 UI에 Cursor Pagination을 도입하여 데이터 일관성 및 Append-only 구조 확보
TanStack Query의 useInfiniteQuery를 통한 Cursor 기반의 비동기 상태 관리 및 순차적 데이터 페칭 구현
RSC 환경에서 URL SearchParams를 통한 Cursor 상태 전달로 서버 사이드 렌더링과 클라이언트 상태 간의 동기화 해결
Optimistic Update 시 Cursor 체인을 유지하여 전체 페이지 무효화 없이 최상단 데이터만 효율적으로 갱신하는 구조 설계

실천 포인트

1. 무한 스크롤/모바일 우선 UI인가? → Cursor Pagination 채택

2. 딥링크/북마크/페이지 번호 UI가 필요한가? → Offset Pagination 채택

3. 데이터 쓰기 빈도가 높아 데이터 밀림(Shift) 현상이 발생하는가? → Cursor Pagination 채택

4. CDN 레벨의 정적 응답 캐싱이 필수적인가? → Offset Pagination 채택

태그