Client-Side vs Server-Side Pagination in JavaScript

Client-Side vs Server-Side Pagination in JavaScript

There are two approaches to pagination. Here is when to use each.

Client-Side Pagination

All data is loaded upfront. The browser slices the data for each page.

const allData = [...]; // 100 items loaded
const pageSize = 10;

function getPageData(page) {
  const start = (page - 1) * pageSize;
  return allData.slice(start, start + pageSize);
}

Pros: fast page switches (no network), simple to implement, works offline. Cons: slow initial load (all data at once), high memory usage, not suitable for large datasets.

Use for: small datasets (< 1000 items), static data, offline apps.

Server-Side Pagination

Each page is fetched from the server on demand.

async function getPageData(page, size) {
  const res = await fetch(`/api/data?page=${page}&size=${size}`);
  const { data, total } = await res.json();
  return { data, totalPages: Math.ceil(total / size) };
}

Pros: fast initial load (only one page), low memory, scalable to millions of items. Cons: network latency on page switch, more complex (server needs to support pagination).

Use for: large datasets (> 1000 items), databases, APIs.

When to Use Which

The Takeaway

Client-side: load all data, slice with array.slice. Fast page switches but slow initial load. Good for small datasets. Server-side: fetch one page at a time from the API. Fast initial load but network delay on page switch. Good for large datasets. Choose based on your dataset size.