Preloading data in groups or page elements on Bubble.io
How do you make sure you are creating efficient bubble apps? Hit the database less, reuse queries etc. Bubble will do some of this for you but, best to make sure of it yourself.
One of the challenges for Bubble.io developers is ensuring that they work with the platform rather than against it. This requires a keen awareness of application efficiency and cost management.
Bubble’s platform will optimise performance by caching frequently used searches and maintaining overall app performance. However, as a developer, you also bear the responsibility of optimising your app.
Traditionally, developers focus on optimising CPU, RAM, and disk usage to ensure efficiency. In Bubble, the focus shifts to minimising work units. The fewer work units you use, the more efficient and cost-effective your app will be.
A critical area to optimise is database activity. While the structure of your database is important, how you access and manage that data is equally crucial. One effective strategy is preloading data at the top of the page and then reusing it throughout the page flow. Mastering this technique can significantly enhance your app's performance and long-term sustainability.
How do you use page elements to do this?
You have a couple of options, depending upon whether you want to load a single Thing or a list or group of Things.
1. Using group elements for data preloading
Groups in Bubble can be set to fetch and display data as soon as they are loaded, making them ideal for preloading purposes. In this case it will be expecting to you load just one line item from the database.
Steps:
Create a Group: Add a group element to your page.
Set Data Source: Bind the group’s data source to a search or database query and return the first item.
Display Data: Within the group, add elements (text, images, repeating groups, etc.) that display the preloaded data.
Visibility: if you don’t need the data now, set the visibility for the element to off. But do remember to you need to take in to account suitable data security measures to prevent unwanted data being accessed by users.
When the group has loaded the data it is there for use by any other element on the page. And this saves you having to hit the database again. You can then refer back to it further down the page and introduce it to your pages flow.
For example, if you have preloaded an Order in to the page, you can then keep referring to the Order by referencing the group to which you bound it.
Orzo Blue, concentrate on delivering exceptional Bubble.io solutions tailored to meet your unique needs. If you're looking for a dedicated & commercially aware partner to bring your vision to life, let’s connect and explore how we can help you succeed.
2. Preloading Data in Repeating Groups
Repeating groups are ideal for displaying lists of items and can be preloaded to enhance performance. Remember of course, only get the data you really need for the purpose. Don’t try and get everything from the database, because this will also cause problems.
Steps:
Add a Repeating Group: Place a repeating group element on your page.
Configure Data Source: Set the repeating group’s data source to a search query.
Bind Data to Cells: Add elements inside the repeating group cells to display the data.
When you need the data from the Repeating Group, you can refer directly to later in the flow.
One of the advantages of this approach is the ability to filter this list of Things on the front end using the :filtered operator. Filters, work in a similar way to searches, but occur after the database returns the data from the backend and are execute on the front end. This makes them very efficient when used well, because they do not consume additional work units.
However, be cautious not to retrieve excessive data from the database and rely solely on the front end to manage it for you. This can lead to inefficiencies and for a very poor user experience.
A common use case for this approach is displaying a buyer's orders. You can load all of the buyer's orders into a single Repeating Group and use tabs to filter the data into "Dispatched" and "Not Dispatched" orders. This way, you preload all necessary data once and efficiently filter it on the front end based on the selected tab.
3. Preloading Data with Conditional Visibility
You can also preload data in groups or elements that are conditionally visible. This means you can change the data source for the element when the conditions are met. So for example this may be when you have a set of tabs of filters to execute pagination, or to separate draft products from published products.
These tabs can refer to a preloaded datasource and then filtered according to requirements.
Load once, filter the data to display.
Steps:
Add a Group: Place a group element on your page and set its initial visibility to false.
Set Data Source: Bind the group’s data source to the relevant search query.
Add Conditional Visibility: Use conditional statements to make the group visible when certain conditions are met.
They key here, the data source for the display is going to be a filter of the original preloaded data in the Repeating Group.
It’s very efficient on the front end and it saves you hitting the data base multiple times when the user filter through the data.
Conclusion
Preloading data directly in groups or page elements can significantly boost the performance, user experience and cost of running your Bubble.io applications.
By directly binding data sources to groups, effectively utilising repeating groups, and leveraging conditional visibility, you can manage your contact with the database and provide a smooth user experience.
When you do search the database, optimise your query to only get the data you need. Put in pagination where needed, and use filters to split data up into sensible groups that make sense for the user experience.
Would you like to learn more about Orzo Blue and the work we do with Bubble? Why not get in touch or subscribe to this Substack?