Pagination

How it started

The idea of pagination came from print media centuries ago. Before the mid-1500s, pages in documents usually weren’t numbered. But around 1550, numbering pages in order became a standard practice in books. Later, with computers, software like word processors automated this process.

Moving to the digital world

When the internet first started, internet speeds were slow, and computer interfaces were very basic. Because of this, it made sense to split large amounts of web content into smaller pieces. Pagination moved to websites to help pages load faster, make it easier for people to understand information, and simplify how they navigate through content.

Why pagination is so important

Pagination might seem like a small detail, but it makes a big difference for how websites work, how easy they are to use, and how well they appear in search results.

Performance & user experience

– Faster loading: Imagine a page with hundreds of items. Loading all of them at once would be very slow. Pagination breaks this huge amount of content into smaller parts, so each page loads much faster. This makes the website feel quicker and more responsive.
– Less overwhelm: Seeing too much information at once can be overwhelming and frustrating for users. Pagination presents content in manageable chunks, helping users focus and feel less stressed. This makes them more likely to stay on your site.
– Better engagement: Clear navigation controls like “Next,” “Previous,” and page numbers guide users smoothly through content. When users know where they are and where they can go, they’re more likely to explore and spend more time on your site.

Usability & navigation

– Clear structure: Pagination gives users a mental map. They can see how much content there is in total and where they are within it. This is super helpful for things like search results, product lists, or long articles.
– User control: With pagination, users decide when and how they want to move through content. This is different from “infinite scroll,” where content just keeps loading automatically, which can sometimes feel out of control.

SEO & crawl efficiency (How search engines find your site)

– Boosts SEO: When done right, pagination helps search engines like Google find and understand your content better. Each numbered page (like “page 2,” “page 3”) gets its own web address and can potentially show up in search results.
– Avoids problems: Using proper pagination, where each page points to itself as the main version, helps search engines understand that these are related pages, not duplicated content. This prevents issues that could hurt your search ranking.
– Optimises crawl budget: Search engines have a “crawl budget”,  a limit to how many pages they can check on your site. Pagination allows them to efficiently crawl and index your content without getting overwhelmed or wasting their time (and your server’s resources).

Types of pagination

Different pagination methods exist, each suited to specific contexts and user objectives. Here are the main types:

Numbered (traditional) pagination

This is what you usually think of when you hear “pagination.” It shows clear links for each page (like “1, 2, 3… Next”) so you can jump directly to any page.

Pros

– Clear structure: Users know exactly how many pages there are and where they are in the content.
– Good for goals: Ideal if users want to find specific items or jump to a particular section.
– SEO-friendly: Each page has its own unique web address, which helps search engines find and list all your content.

Cons

– Can feel slow: Clicking through many pages can be tedious, especially if there are a lot of them or if you’re on a mobile phone.

Best for

Online stores (product catalogs), blog archives, or search results where users might want to go to a specific page.

“Load more” button

This method first shows a small amount of content. Then, when the user clicks a “Load More” button, more content appears on the same page.

Pros

– Smooth browse: Reduces the need to click through different pages, making the experience smoother.
– Good for mobile: Works well on phones as tapping a button is often easier than tiny page numbers.
– Footer stays visible: The website footer remains accessible, unlike with infinite scroll.
– Track engagement: You can easily see if users are clicking to view more content.

Cons

– Lose your place: Users might lose track of where they are since there aren’t clear page breaks.
– SEO challenges: Search engines might not find all the deeper content unless you take extra steps to make it discoverable.

Best for

Mobile-friendly websites, image galleries, or product lists where the goal is continuous Browse without needing to load a whole new page.

Infinite scroll

This method continuously loads more content as the user scrolls down the page. There are no clicks or page reloads needed.

Pros

– Seamless experience: Offers a very smooth Browse experience, great for keeping users engaged.
– Excellent for mobile: Very intuitive on mobile devices where scrolling is natural.
– Good for content-heavy sites: Perfect for platforms with a constant stream of new content, like social media feeds.

Cons

– Hard to reach footer: It can be very difficult to get to the bottom of the page (where the footer usually is).
– Poor navigation: Hard to go back to a specific spot or bookmark a particular place.
– Performance issues: Can slow down the page over time as more and more content loads.
– SEO challenges: Can be difficult for search engines to fully crawl and index all the content.

Best for

Social media feeds, visual discovery platforms (like Pinterest), or any situation where the main goal is just to browse and explore, not to find something specific.

UX best practices

Clear, easy-to-use controls

– Obvious “Previous/Next” buttons: Always include “Previous” and “Next” links. Make them stand out visually, and make sure they look “grayed out” or disabled when you can’t go back or forward any further.
– Highlight current page: Clearly show which page you are currently on (for example, by making its number bold or putting a box around it). Also, make sure you can’t click on the current page number, as you’re already there.
– “First/Last” & jump-to options: For websites with many pages, include “First” and “Last” buttons. Also, consider adding a box where users can type in a page number to jump directly to it.
– Accessibility for all: Make sure your pagination works well for everyone. Use special code (<nav aria-label=”Pagination”>, aria-current=”page”) to help screen readers. Ensure all links can be selected using the keyboard, and that pressing “Tab” and “Enter” works logically.

Placement & adapting to screens

– Top and bottom placement: If you have long lists of content, put the pagination controls both above and below the content. This way, users don’t have to scroll all the way up or down to find the navigation.
– Works on all devices: Make sure your pagination looks good and works well on desktops, tablets, and mobile phones. This might mean using a simpler design or fewer page numbers on smaller screens.

Size, spacing & visual appearance

– Easy to tap (for touchscreens): Make sure buttons and links are big enough to easily tap with a finger (at least 44×44 pixels) and have enough space between them. This is super important for mobile users.
– Good contrast: Ensure the text or icons on your pagination have enough contrast with the background color (at least 4.5:1 ratio). This makes them easy to read for everyone.
– Use “…” for long lists: If you have many pages (e.g., 100 pages), don’t show all the numbers. Instead, show a few at the beginning, the current page and nearby pages, and a few at the end, using “…” to represent the skipped pages (e.g., “1 2 … 7 8 9 … 99 100”).

Smooth interaction & feedback

– Show loading: If content loads when you click “Load More” or change pages (without a full page reload), show a loading spinner or indicator. This tells the user that something is happening.
– Maintain scroll position: If a user goes to another page and then comes back, try to remember where they were scrolled to on the previous page. This helps them maintain their context.
– Focus on content: After a page changes, automatically move the user’s focus to the main content area, not back to the pagination controls. This is especially helpful for users with screen readers.

SEO considerations

When you use pagination on your website, it’s important to set it up correctly so search engines like Google can find and understand all your content.

Canonical tags

– Each page points to itself: Every single paginated page (like /page/2 or /products?page=3) should have a special link rel=”canonical” tag that points right back to its own URL. This tells search engines that each page is unique and should be indexed separately. This helps avoid problems where search engines might think you have duplicate content.
– Don’t point all pages to page 1: A big mistake is to make all paginated pages point back to the first page (e.g., /page/1). If you do this, search engines won’t properly find and rank the content on pages 2, 3, and so on.

rel=”prev” / rel=”next” signals

– Still useful (Outside Google): Even though Google stopped actively using these tags in 2019, they are still helpful for other search engines like Bing, for browsers (which might use them to preload pages), and for accessibility tools.
– Use them together with canonicals: It’s a good idea to use rel=”prev” and rel=”next” tags along with your canonical tags. This just helps clarify the order of your paginated pages.

Crawling & indexing (how search engines find your content)

– Don’t block deeper pages: Make sure that search engines can access and read all your paginated pages. Don’t use noindex (which tells search engines not to list the page), nofollow (which tells them not to follow links on the page), or block them in your robots.txt file. Blocking these pages means your content won’t be seen or ranked.
– Avoid too many pages: Try not to have extremely long chains of paginated pages. Search engines have a “crawl budget” (a limit on how many pages they’ll check on your site). For very large amounts of data, consider using “Load More” buttons or a “View All” option instead.

URL Structure

– Clean and consistent URLs: Use web addresses that are logical and easy to understand for both search engines and users. This usually means using something like ?page=3 (a query parameter) or /page/3/ (a path-based number).
– Remove unnecessary stuff: Get rid of tracking codes or session IDs from your URLs. These extra bits can make search engines think you have duplicate pages and waste their time.

JavaScript & hybrid pagination

– Google’s improving, but be careful: Google is getting better at seeing content loaded by JavaScript. However, if your pagination links only appear after a user clicks or scrolls, search engines might have trouble finding them.
– Include direct links: Always make sure your HTML code includes direct <a href=”…”> links for all your paginated pages. This ensures search engines can easily find and follow them, even if you also use JavaScript for a smoother user experience.

How to build pagination (Technical details)

Building pagination involves choosing the right approach for your project. Here are the technical ways to implement it.

Where the pagination happens (Client vs. Server)

– Server-side pagination: This is best for websites with a huge amount of data. The server (where your website’s data lives) sends only the specific page you asked for. This means pages load faster initially and it works even if a user has JavaScript turned off.
– Client-side pagination: This is good for websites with small amounts of data where all the information can be loaded at once (like a few dozen items). Once loaded, switching between pages is very fast because your web browser already has all the data. However, it can slow down if you have too much data.
– Hybrid (AJAX-based) pagination: This is a good balance. The basic page links come from the server (good for search engines and accessibility), but when you click a link, only the content part of the page updates (faster and smoother user experience).

How databases handle pagination

Databases need specific methods to pull out just the right amount of data for each page:

Offset-limit pagination

How it works: You tell the database to LIMIT the number of results to, say, 10, and OFFSET (skip) the first 20 results to get the third page. It’s simple and widely used.

Drawbacks: It gets slower as you go deeper into a large dataset because the database still has to scan all the records it’s skipping.

Best for: Smaller or unchanging datasets where speed isn’t a huge concern for very deep pages.

Cursor-based (Keyset) pagination

How it works: Instead of skipping a number of rows, you ask the database for results after a specific point (a “cursor”), usually using the unique ID of the last item seen. For example, WHERE id > last_seen_id ORDER BY id LIMIT 10.

Benefits: This method performs consistently fast, no matter how large the dataset is, and it’s better when data is changing often.

Trade-off: You can’t directly jump to an arbitrary page (like page 50); you have to go “next” or “previous.” The setup can be more complex.

How URLs and APIs are designed

– Clear page URLs: Use web addresses that are easy to understand for both search engines and users, like ?page=2 (using a query parameter) or /page/2/ (using a path).
– For cursor-based APIs: If you’re using cursor-based pagination, make sure your API response includes both a next_cursor and prev_cursor so users can easily move forward and backward.
– GraphQL: In GraphQL APIs, you can use either “offset/limit” or a special “Relay-style” cursor system, depending on what your needs are.

How pages are shown (rendering)

– Server-rendered HTML: Building the full page on the server is best for search engines and accessibility. You can then add JavaScript on top for a smoother experience (like AJAX pagination).
– Client-rendered (CSR) pagination: If your entire page is built by JavaScript in the user’s browser, you might need extra steps (like pre-rendering on the server) to make sure search engines can properly find and index your content.

Performance & speed tips

– Prefetching: Load the next page’s data in the background before the user clicks on it. This makes page transitions feel instant.
– Indexing: Make sure the database column you’re using for your “cursor” (like an id) has a database index. This makes database queries much faster.
– Chunked loading: Instead of loading one page at a time, load a few pages’ worth of data at once and then paginate through them on the client side. This reduces how often your app talks to the server while still avoiding a huge initial load.

Sportmonks and pagination

Sportmonks, a company that provides sports data through its Football API, uses pagination to handle large amounts of information efficiently. Instead of sending thousands of game schedules, team details, or events all at once, our API sends smaller, manageable “pages” of results, usually 25 items per page. This keeps the service fast and stable.

How pagination works in Sportmonks API

Sportmonks uses a system based on “pages”:

– Response information: Each time you ask for data, the API response tells you:
      – The current_page you are on and how many items are per_page.
      – A has_more flag that tells you if there’s more data available.
      – A next_page URL, which is a link you can use to get the next set of results.

– Getting more results: You can get more data by adding &page=2, &page=3, and so on, to your request.
– Changing page size: Developers can choose how many items they want per page using the &per_page=number setting (from 1 to 50 in API v3).
– Faster initial load: If you’re doing an initial data load, you can add filters=populate to get up to 1,000 records per page. This makes the first load much faster, but you won’t get related details (like player lineups) included with each item.

Smarter data delivery with Sportmonks

Handling large football datasets is simple with Sportmonks’ built-in pagination. Instead of overwhelming your app with bulk data, you can load results in smaller, efficient pages, keeping things fast, stable, and user-friendly. Whether you’re fetching match stats, team details, or player events, pagination helps you stay in control.

Explore how Sportmonks makes football data easy to work with. Sign up for a free trial and start building with flexible, developer-friendly APIs today.