{
  "id": 15115437,
  "title": "My users table reads one pagination contract: paginate(15), withQueryString, and a React pager that trusts meta",
  "url": "https://urgent.news/2026/10/17/my-users-table-reads-one-pagination-contract-paginate-15",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-17T04:12:25.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/kamrankhandev/my-users-table-reads-one-pagination-contract-paginate15-withquerystring-and-a-react-pager-that-4c40"
  },
  "original_language": "en",
  "account": "I built my first admin panel by fetching all users and slicing pages on the client side. However, when I hit 2,000 users, loading times increased to eleven seconds. Server-side pagination proved to be less complex, but the challenge lay in establishing a consistent contract between Laravel and React to ensure neither side improvised. On the backend, I utilized a simple four-line command to fetch users: $users = User :: query () - latest () - paginate ( 15 ) - withQueryString (); return UserResource :: collection ( $users ); paginate(15) handled the heavy lifting, implementing limit, offset, and total count. withQueryString() appended the current query string to the generated links, allowing future filters like search or role to remain unchanged even after a page change. The frontend ignored these links entirely.\n\nMy pager read only meta, constructing a fetchUsers function that fetched users based on the current page and updated both users and meta state accordingly. If the backend provided an incomplete response, the pager gracefully defaulted to a single page, maintaining usability. My pager's simplicity consisted of two buttons, Prev and Next, which fetched the next or previous page upon click. The React side refrained from computing total or per_page values independently, instead relying on the backend's meta data. This approach prevented drift between frontend and backend pagination logic, ensuring users never encountered a non-existent page. The same pagination contract extended to other lists like the dashboard's recent-users list, and I integrated this pattern across all admin panels. The complete implementation can be found in my Laravel + React SaaS Starter Kit at $19 one-time.",
  "summary": "The first admin panel I built fetched all users, dumped them into state, and sliced pages client-side. It worked until a client hit 2,000 users and the list page took eleven seconds to load. Server-side pagination isn't hard. The hard part is agreeing on the contract between Laravel and React so neither side improvises. On the backend, the users index is four lines of intent: $users = User ::…",
  "key_points": [
    "Implemented server-side pagination with Laravel's paginate(15) for 2,000+ users",
    "React pager relied on backend meta data, fetching users based on page and meta",
    "Consistent pagination contract extended to all admin panels in Laravel + React SaaS Starter Kit"
  ],
  "editors_take": "Standardizing a strict pagination contract between Laravel and React eliminates logic drift and prevents frontend errors by making the backend the single source of truth for metadata.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}