Back to blog
November 17, 2023
Design

Build Your Own App: Bravo Studio launches Pagination

Today we are introducing pagination!
Pedro Codina
By
Pedro Codina

Now all Bravo Studio users are able to paginate their content and boost their app performance. This feature is key when dealing with a lot of data and endpoints.
Have you ever clicked through an image gallery? Or scrolled through your Instagram feed for hours? What about choosing what to watch on Netflix? Pagination allows content on those kinds of apps to reduce loading time, have a smoother UX and save network traffic and battery.

Pagination is a way of organizing lots of data. With Bravo Studio you are able to connect through an API to a dense database and limit the number of results shown at once to help keep network traffic in check. You will be able to setup pagination if the API you are using supports pagination.

Databases can be stored in different platforms such as Wordpress, Github or Reddit. With pagination, results from the database won’t be shown all at once. Instead, we’ll return a subset - or a page - at a time.

Now, when you build your own app using Bravo Studio, you can choose between 3 pagination types –offset, page and seek– depending on how you need to set the limit parameter.

Pagination + Bravo Studio: Offset

Offset pagination is implemented with two parameters: a "limit" parameter and an "offset" parameter. These parameters are sent by the client in the HTTP request, usually in the URL query string.

<https://example.com/elements?**limit**=10&**offset**=30>

The "limit" parameter specifies the number of elements that should be included in the response, and the "offset" specifies the number of elements that have to be skipped, starting from the beginning of the list.

Pagination + Bravo Studio: Page

In this pagination type, instead of sending an "offset" parameter, a "page" parameter is sent, so that the API knows which set of elements to return. Usually, the APIs have a default page size set, but this can normally be specified in the request as well, with a "pageSize" parameter.

In this example, let's assume the API has a default page size of 20 elements, and that the page numeration starts with 1. In the following request, the elements 81 to 100 will be returned (page 1 to 4 would cover the first 80 elements).

<https://example.com/elements?page=5>

If this API supports setting the page size, the following request will cause the elements 50 to 60 to be returned.

<https://example.com/elements?page=6&pageSize=10>

Pagination + Bravo Studio: Seek

In "Seek" pagination type, when performing an API request, the API will return the first set of elements, and a "cursor" parameter, with an API-defined value. This parameter will be a pointer that will need to be included in the following API request, in order to retrieve the next set of elements. Depending on the API implementation, it might be possible to specify the number of elements to return in each API call.

<https://example.com/elements?cursor=abc123>

Now you know, when your app needs to load content from a large database, use pagination in Bravo Studio! This will prevent your app from crashing and avoid slow performance or timeout issues. Start Bravorizing for free now!

More like this

Join 100,000+ Bravistas today

Turn your Figma designs into mobile app prototypes with native features
Get the best of Bravo straight to your inbox.
Subscribe to receive new updates, offers and resources.
Thank you! Your submission has been received!
😖 Oops! Something went wrong while submitting the form.