Pagination

First of all Pagination definition or paging is a professional term from a printing industry. It is meaning a process of dividing content into discrete sheets.

Actually, in the programming world, it means the same. No matter are you a web or mobile developer, or even UI/UX designer. Over time you will meet the problem of displaying a big amount of data to users. It can be some e-catalog products, blog posts or even huge articles.

There are a lot of reasons to use pagination. All of those we can separate into two main groups. Due to the problems, they are solving.

Pagination in UI/UX

Pagination is a very important term for design user interfaces. Mainly it is needed to navigate through the content that displayed on a few pages. Breakdown big articles to small pages, to create a more convenient way for user interaction.

Here we have also two different techniques:

First - is a traditional pagination style, with simple navigation elements. It should be buttons to access the next or previous page or direct link to a page by number.

Simple pagination examples
Simple pagination examples

Second - is infinity pagination or infinity scroll. It is a different example of pagination.

In this case, we have no pages users can navigate. We have one big screen. It loads the next amount of data at the end. As soon as the user will reach the end of a page or press the 'load more' button new portion of content will be pushed in the end. It creates an endless experience for content.

It is a good approach for social apps to have a continuous news feed. That will keep user attention as long as possible.

Load more pagination example
Load more pagination example

Pagination in Development

The idea is pretty the same. It is to have separate pages of data. But the reason is different. Systems limitation is an important one. Limited HTTP request size, limited memory on the browser, time for UI calculations, etc.

For example. There are no reasons to load all blog posts at page start because users for sure will not check it. It is better to load the first ten, to display it as soon as possible.

Implementation of pagination depends on backend architecture. And API architecture, like REST or GraphQL approach.

There are two main ways that a common for any architecture and approach.

Pagination parametres

The most popular and simplest way. It is mean that we have additional parameters in data query, like page and limit. The best pagination example is the URL parameters.

http://DOMAIN/api/items?limit=10&page=2 - we will get items starting from 20 till 30. All routes with pagination have a specific structure for making working with pagination more easier.

{
    data: [...],
    limit: 10, // how many items per page you want to get.
    total: 100,  /// how many items we have in total
    page: 2 // mean which page do you want to fetch.
}

The current approach we are using for our DUMMYAPI tool. Feel free to play around pagination on the API Explorer page.

Try to use a link below to check a pagination example with URL params. https://n161.tech/t/dummyapi/explorer/#user?limit=5&page=1

Cursor Pagination

This way is a bit more complicated for backend implementation. The main idea is that we do not need to handle any page parameters on a client.

After execution first resource request we will get a list of data and hash keys. This hash keys we can use to request the next page of data. Typically you need to add this hash as a parameter in the next request.

Example of a response from Facebook API:

{
    data: [...],
    paging: {
        cursors: {
            before: "{hash}",
            after: "{hash}"
        }
    }
}