The Storefront API limits how many items can be queried at once. This encourages better app performance by only querying what's immediately necessary to render the page.

However, sometimes you might have long lists of products, collections, or orders. Rather than rendering every item in the list, for better performance you should only render one page at a time. The Storefront API uses cursors to paginate through lists of data and the Pagination component enables you to render those pages.

It's important to maintain the pagination state in the URL for the following reasons:

  • Users can navigate to a product and return back to the same scrolled position in a list.
  • The list state is shareable by URL.
  • Search engine crawlers are also able to index the pages when the pagination state is stored in the URL,

To set up pagination inside your app, do the following tasks: