Pagination patterns in Node.js - Performance & Optimization

Performance: Pagination patterns

MEDIUM IMPACT

Pagination patterns affect how quickly users see content and how much data the browser processes at once, impacting load speed and interaction responsiveness.

Loading large lists of items in a web app

Node.js

const page = req.query.page || 1;
const limit = 20;
const items = await db.getItems({ skip: (page - 1) * limit, limit });
res.json(items);

Loads only a small subset of data per request, reducing load time and memory use.

📈 Performance GainReduces blocking time to tens of milliseconds; lowers memory footprint

Loading large lists of items in a web app

Node.js

const allItems = await db.getAllItems();
res.json(allItems);

Loads all data at once, causing slow initial load and heavy memory use.

📉 Performance CostBlocks rendering for hundreds of milliseconds on large data sets; high memory usage

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Load all data at once	High (many nodes)	Many reflows	High paint cost	[X] Bad
Paginate data per page	Low (few nodes)	Few reflows	Low paint cost	[OK] Good

Rendering Pipeline

Pagination limits the amount of data sent to the browser, reducing DOM nodes created and styles calculated, which speeds up layout and paint.

→DOM Construction

→Layout

→Paint

⚠️ BottleneckLayout stage due to fewer DOM nodes when paginating

Core Web Vital Affected

LCP

Pagination patterns affect how quickly users see content and how much data the browser processes at once, impacting load speed and interaction responsiveness.

Optimization Tips

1Always fetch only the data needed for the current page.

2Avoid rendering large lists all at once to reduce layout and paint costs.

3Use pagination to improve Largest Contentful Paint (LCP) and reduce memory usage.

Performance Quiz - 3 Questions

What is the main performance benefit of paginating data in a web app?

A Triggers more reflows to update the UI faster

B Increases the total data loaded to improve user experience

C Reduces initial load time by limiting data sent to the browser

D Loads all data to avoid multiple server requests

DevTools: Performance

How to check: Record a performance profile while loading the page with and without pagination. Compare scripting and rendering times.

What to look for: Look for shorter scripting and rendering blocks and fewer layout recalculations with pagination.