Almost every application has data, and that data must be visualized in some way. A common way to display a set of data is through a list, which can quickly become too long to read.

Common methods used to display application data

These methods display large data sets on dynamic web pages while also providing faster initial page loading. For example, Google Web uses pagination for its search answers.

Twitter and Facebook use infinite scrolling, where the user scrolls to constantly see new posts. Infinite scrolling has become particularly popular on social media channels.

Instead of pagination, Google and Google Images use a “load more” button to display search results and images on phones.

This article will compare each of these approaches and guide you through implementing them in your application.

Use pagination to display data

Advantages of using paging

  1. Paging makes navigation and searching easy. For example, on an e-commerce site, you can easily find the product you were looking at by clicking back to a particular page.
  2. Paging is ideal for sites that prioritize utility because each result set has its own page and URL, which is easy to remember and share with page numbers. Sometimes, some data sets need to respect a particular order of items, and paging can do that.
  3. This approach works well for sites that aren’t designed to be addictive. Social media sites can be addictive because it’s hard to stop scrolling on them, but traditional paging, which forces users to click buttons and navigate through the page to access data, makes it less addictive.

Disadvantages of using paging

  1. It’s an old technique. Paging has been around since the dawn of the Internet. All outdated websites have it, and this type of paging is no longer intuitive.
  2. No one really gets through the first page. Have you ever checked the second page of Google results? Probably not. Clicking on the numbers “1”, “2 “and” next page “can be a hassle that keeps people from looking at more results.
  3. Paging is not so well suited to mobile devices. On mobile devices, users prefer to load more buttons or scroll indefinitely because the screen on mobile devices is vertical.
  4. Each new result is on a new page, resulting in unnecessary load time. This can be solved with shallow routing and pre-rendering, but it still annoys the user.

When do you use paging in your application

If you are building a directory or e-commerce site for the web, use paging. However, if you’re building any mobile websites or apps, you’ll want to consider implementing a “load more” button instead.

Point of view. ** If you are displaying data as a list on mobile, ** avoid this method. This approach works well in grids.

Use the load more button in your application

Advantages of using the load more button

  1. The “load more” button looks fine on mobile devices, and unlike paging, the “load more” mechanism adds more results to existing results without replacing the entire result.
  2. To find a result, the user simply clicks **” load more “** instead of remembering which page the item is on
  3. “Load More” allows you to easily measure user interest and engagement by the number of times they click “load More”. **
  4. This method can be used to help users reach the footer of your site faster, meaning your site ads can collect more impressions.

Disadvantages of using the “load more” button

  1. It can be hard to find because the user won’t remember the location of a particular result. To find something, they mostly have to keep clicking “load more”. **
  2. With “load More”, potential impressions can be lost because whatever you hide under the “load more” button is less likely to be viewed than with infinite scrolling.

When to use “load more”?

If you create any visual list on your phone without infinite scrolling, use the “load more” method. If your application is not a social media application (in which case it would be better to implement infinite scrolling), you should also use this method if you want data loading to be more intuitive than pages.

Keep in mind that in many apps (including social media), users refresh their feeds by swiping up, especially in Instagram, by clicking on new posts. These are all forms of “load more” mechanics that you can get inspiration from.

Also, if you have a lot of content but want users to reach the footer or hide it behind a paywall, or in that case, you should consider using the “load more” button.

Implement infinite scrolling

Use the advantages of infinite scrolling

  1. Infinite scrolling encourages users to engage with your application for a longer period of time. With infinite scrolling, there is nothing to stop the user from continuously scrolling, and it takes the least effort to do so compared to paging and the “load more” approach.
  2. Infinite scrolling feels fast compared to other methods. Scrolling is seamless, and you can always load more content in the background as the user gets closer to the end of the view, so they won’t even realize how and when the new content is loaded.
  3. It is also suitable for chronological and algorithmic dynamic service content. With paging, your data must be sorted in a certain order. Using infinite scrolling means you have the flexibility to decide how and in what order content is served, which is ideal for social media applications.

Disadvantages of using infinite scrolling

  1. If your website or application has a footer, it will never be seen.
  2. Adopting infinite scrolling can be addictive to your users, which may not be good for their digital health. As of press time,A bill has been introduced in the SenateIf passed, infinite scrolling will be prohibited.

    Of course, it’s unlikely to pass, but it shows how much impact unlimited scrolling can have in getting users hooked on your platform.
  3. Infinite scrolls are harder to browse and search. With paging, you can remember specific page numbers to retrieve specific results. But with “load more” and infinite scrolling, people will have to scroll up for a long time to find specific content.

You can read more about why you shouldn’t use infinite scrolling here.

When to use infinite scrolling

If you’re building a mobile app or social media app, or just want users to scroll through a lot of content in a row (i.e. a blog), you should use unlimited scrolling.

How does infinite scrolling work

As the user reaches the end of the viewport, you load more results. In normal JavaScript, it works like this.

window.onscroll = function(ev) { if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { // you're at  the bottom of the page, load more content here. } }; // from stackoverflow (stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom)Copy the code

I drew a graph to help explain how the data is traversed and how the cursor works.

So imagine that you query the back-end API and there are 900,000 entries in the database. You don’t want to get all the entries, because that will slow down the performance of your application.

To simplify, let’s replace 900,000 with the number 9.

To display this data, you have to break it up into sections. It doesn’t have to be displayed at equal intervals, but it usually is. Here is a list of all the entries in the database.

{
  "data": [
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
    { id: 5 },
    { id: 6 },
    { id: 7 },
    { id: 8 },
    { id: 9 }
  ]
}

Copy the code

Now, since it’s not feasible to get them all at once, you can get them in chunks from a database in the background.

For the first result, you only want to get the first three items.

To get the first page, query “first 3, last 0” in the database. For fetch the second page, query “fetch first 3, last 3”, and so on.

You can also use the terms limit/offset instead of first/skip.

Another commonly used method for retrieving paging data is called a cursor. When using a cursor, the “after “value is used to get the node after a particular point.

Here’s a comprehensive article explaining why you might want to use cursors instead of the limit/offset method.

When the back end retrieves selective data from the database, it sends a response that usually looks like this.

{ "data": [ { id: 4 }, { id: 5 }, { id: 6 } ], "totalCount": 9, "fetchedCount": 3, "pageInfo": { "prevCursor": "prev_4", // <- this is usually converted to base64 "nextCursor": "after_6", // <- this is usually converted to base64 "hasNextPage": true // <- are there more pages remaining to fetch? }}Copy the code

The front end then iterates over these cursors to get pages of paging data.

This method is similar for paging, “load more”, and infinite scrolling, so you can do all of this by fetching data using the above method.

For normal paging, you must use both the Next and previous cursors. For “load more” and infinite scrolling, you only need the Next cursor because you have to iterate through them to get more and more data.

conclusion

By using one of these paging methods — or a combination of them — large data sets can be displayed in an optimal manner. Coding is fun.

A guide to pagination, loading more buttons, and infinite scrolling appears on the LogRocket blog.