Cursor Pagination

커서 페이지네이션

A cursor resumes after the last seen item even when new items arrive ahead of it.

···
html
<div class="viz"><h3>CURSOR AFTER C</h3><div class="row" id="items"><span class="box">A</span><span class="box">B</span><span class="box active">C</span><span class="arrow">→</span><span class="box">D</span><span class="box">E</span></div><div class="muted" id="caption">next: D, E</div></div>
css
.viz{width:94%;height:88%;max-width:960px;padding:clamp(10px,2vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);font:600 clamp(12px,1.35vw,16px)/1.35 var(--font-sans,system-ui,sans-serif);display:flex;flex-direction:column;gap:clamp(7px,1.8vmin,13px);overflow:hidden}.viz h3{margin:0;color:var(--accent);font:700 clamp(12px,1.35vw,16px)/1.2 var(--font-sans,system-ui,sans-serif);letter-spacing:.04em}.viz .row{display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.4vmin,12px);flex:1;min-height:0}.viz .box{padding:clamp(5px,1.5vmin,12px);border:1px solid var(--line);border-radius:9px;background:var(--bg);text-align:center}.viz .muted{color:var(--muted)}.viz .accent{color:var(--accent)}.viz .code{font-family:ui-monospace,monospace}.viz .pill{padding:3px 7px;border:1px solid var(--line);border-radius:99px;white-space:nowrap}.viz .active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}.viz .arrow{color:var(--accent);font:700 18px ui-monospace,monospace}#items{gap:clamp(3px,1vmin,8px)}#items .box{min-width:12%;padding:9px 3px}#items .fresh{color:var(--accent-2)}
js
let added=false;function draw(){added=!added;document.getElementById('items').innerHTML=(added?'<span class="box fresh">NEW</span>':'')+'<span class="box">A</span><span class="box">B</span><span class="box active">C</span><span class="arrow">→</span><span class="box">D</span><span class="box">E</span>';document.getElementById('caption').textContent=added?'new item inserted · next: D, E':'next: D, E'}draw();setInterval(draw,1700)

Cursor pagination returns an opaque position after the last item instead of a page number. The next request reads after that position in a defined sort order. New items at the front do not shift the boundary already read.

In the demo, inserting a new item before the first batch still leaves D and E after cursor C. Use a stable ordering with a tie breaker, and keep clients independent of the cursor encoding.

When to use

Use it for long or frequently updated feeds that must be traversed without shifted page boundaries.

Open as page ↗