Pagination patterns in FastAPI - Performance & Optimization

Performance: Pagination patterns

MEDIUM IMPACT

Pagination patterns affect how quickly data loads and renders on the page, impacting load speed and interaction responsiveness.

Loading large datasets in a web app

FastAPI

from fastapi import FastAPI, Query
app = FastAPI()

@app.get('/items')
async def read_items(page: int = Query(1, ge=1), size: int = Query(10, ge=1, le=100)):
    # Returns only a page of items
    offset = (page - 1) * size
    return get_items_from_db(offset=offset, limit=size)

Loads only a small subset of data per request, reducing payload and speeding up rendering.

📈 Performance GainReduces data transfer size and response time, improving LCP and interaction speed

Loading large datasets in a web app

FastAPI

from fastapi import FastAPI
app = FastAPI()

@app.get('/items')
async def read_items():
    # Returns all items at once
    return get_all_items_from_db()

Loading all items at once causes slow response and large data transfer, blocking rendering.

📉 Performance CostBlocks rendering until all data loads; large payload increases LCP time

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Load all data at once	High (all items in DOM)	Many reflows	High paint cost	[X] Bad
Server-side pagination	Low (page items only)	Single reflow	Low paint cost	[OK] Good
Client-side pagination with all data	High (all items in DOM)	Many reflows	High paint cost	[X] Bad
Client-side pagination with page data	Low (page items only)	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

Pagination limits the amount of data and DOM nodes processed, reducing work in layout and paint stages.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage due to large DOM and reflows

Core Web Vital Affected

LCP

Pagination patterns affect how quickly data loads and renders on the page, impacting load speed and interaction responsiveness.

Optimization Tips

1Load only the data needed for the current page to reduce payload size.

2Render only current page items in the DOM to minimize layout and paint work.

3Avoid loading or rendering all data at once to prevent blocking rendering and slow interaction.

Performance Quiz - 3 Questions

Which pagination pattern improves Largest Contentful Paint (LCP) the most?

A Loading all data and rendering all items in the DOM

B Loading all data at once and paginating on the client

C Loading only a subset of data per page from the server

D Not using pagination at all

DevTools: Performance

How to check: Record a performance profile while loading paginated data; observe layout and paint events.

What to look for: Look for fewer layout and paint events with pagination; shorter main thread blocking times indicate better performance.