Congratulations! You've created a product in Bubble, and it's gaining traction. Your app is receiving praise from the press and users.
You're now getting responses like these: "Your app is neat. However, I find it to be a bit slow. Can you make the data searches faster?"
So you're wondering, "Should I upgrade my Bubble server or not?"
A quick tip from a fellow Bubble developer: make sure your database searches are set up correctly before worrying about upgrading your server capacity.
Don't get me wrong — upgrading your server capacity is a good thing. But what if I told you there was an alternative where you could solve the problem of slow app speed at just about no cost?
I'm not going to tell you how to get 100,000 items from your database in 0.01 seconds. That's not the aim of this Bubble tutorial.
What are database searches?
A database search is a way of finding specific information stored in your Bubble app database. The search can be for a single item or a list of items.
Searching for a single item is usually straightforward. Even if you set up this search poorly, it won't slow down your Bubble app too much.
However, when fetching a list of items, even a tiny mistake can compound and slow your app.
And no matter which application you build, your application revolves around CRUD (Create Read Update Delete) operations.
Getting the Read part right is essential for any app. There are many different ways to build a search. But not all of them are great.
Before we start optimising our Bubble app, let's look at the difference between Client-side and server-side filtering.
Client-side vs server-side filtering
1. Server-side filters - The filters and constraints are applied on the Bubble server. These filters are faster because fewer data has to download to filter the results.
2. Client-side filters - The filters and constraints are applied not on the Bubble server but in the user's browser itself. It may lead to slower performance. When you filter a search client-side, Bubble downloads the complete dataset to your browser and then filters the downloaded data.
It is clear that we need to try and avoid client-side filtering as much as possible.
Now let's see how we can optimise our database searches.
1. Use privacy rules
You might be wondering how privacy rules can help improve the app's speed. Aren't privacy rules used to keep your Bubble app secure, and who has access to the data?
Yes. Privacy rules are for your Bubble app's security.
However, we need to understand how privacy rules work in Bubble.
When you use server-side filtering, Bubble searches your database for records.
If we add constraints to this search, Bubble will have to search fewer records, and the search will be faster as a result. Easy to understand.
Bubble's privacy settings ensure that data is accessible only to people who meet some criteria. They work like search constraints.
Having privacy rules will make Bubble search fewer records in some instances.
2. Reduce nested searches
Suppose you're building a project management application. This application has three different data types: Projects, Tasks, and Sub-tasks.
Project is the overarching concept, and all the Tasks and Sub-tasks can be said to be a part of a Project.
Each Project has multiple Tasks, and each Task has multiple Sub-tasks.
Task data type has a field to store a relational link to the relevant Project. And Sub-task field has a field to store a relational link to the appropriate Task.
We want to list all the upcoming Sub-tasks in a table for the user to see.
One method would be to search for all Sub-tasks where the Task is in a search for all the Tasks associated with this Project.
Sounds complicated?
Well, it is. And if something seems complicated to understand with words, it is likely to be even more complex when you build it. And slow.
Another method, which is simpler and faster, is to create a field in the Sub-tasks data type to store a relational link to the relevant Project.
You can now search for all the Sub-tasks where the Project is the current Project.
This will reduce the database search time and reduce the time it takes to perform CRUD operations in workflows.
3. Avoid advanced filter
Advanced filters are a powerful component of Bubble. However, it would be best if you were carefully using them.
Advanced filters in Bubble use client-side filtering. And client-side filters can significantly slow down your app if the dataset is large.
Let's say we have a list of 10,000 Products. We want to fetch Products where the Name field contains "A".
One way to do this is Search for Product (unconstrained) :filter (Advanced: This Product's Name contains "W")
This will load the list of 10,000 Products into the user's browser and then filter it.
The other way to do it is Search for Product (constraint Name contains W)
The second method is more efficient.
But there will be times when you'll need to use advanced filters. In such a case, we should try to send the user's browser as few items as possible.
Don't just send everything. Send only the list of things that could pass the Advanced filter you will do afterwards.
Optimise.
You may not think about it, but Bubble gives you much control over how your database searches are structured and executed.
Your app's performance is just as important as the user experience. Design is essential, but the end results are more critical.
Instead of upgrading your server capacity, try to optimise your database search queries.
Himanshu Sharma
Did you find the strategies listed in this tutorial helpful? What are some of your favourite ways to improve your database searches? How have they worked for you?
If you enjoyed this article, share it with your friends and colleagues!
If you need some help with your Bubble app or a team of Bubble developers to build a Bubble app for you, reach out to me at [email protected]. You can also follow me on Twitter.
Join the conversation.