To send data to a page in Bubble, you’ll first need to determine what kind of data you want to send. Data can be many things – just think about it: it can be a number. A text. A URL to a file. A date. Or it can be a database record – something you’ve just created or that you’ve stored in the database for some time.
Whatever it is, we sometimes need to provide Bubble with some instructions to send data between pages. There are several different methods for sending data to a Page, and they come with different pros and cons – let’s dive into it.
The Bubble Page Thing
A Thing in Bubble terms is a record in your Database, and a Page thing simply refers to the record that you want to load when that Page opens up. Typical examples that you’ll recognise from other websites are the products in an eCommerce store or an article in a blog or a newspaper. If you are selling products or publishing articles in your Bubble app, you’ll usually don’t set up separate pages for each of them: you’ll set up one page and load the database records onto the page. That record contains all the information you’re showing on the screen, like text, images and price.
Bubble uses the URL to understand what you want it to load to the page by using one of two fields saved on the database records:
- The Unique ID: a 30 character unique string that separates database records from each other
- The Slug: a customizable, unique string of text
By including one of these pieces of data in the URL, Bubble will quickly fetch the correct record when the page is loaded. Bubble automates the use of the unique ID or the slug: as long as there’s a slug available, it will default to that value.
The Pros and Cons of using the Page Thing in Bubble
Let’s have a look at the good and bad sides of using the Page Thing:
Pros
- It’s fast – Since the Page Thing record is a part of the initial loading process of the page, the data will load immediately
- It gives short, SEO-friendly URLS – search engines generally don’t love URL’s that are too long and contain lots of parameters. The Page Thing provides a clean and humanly readable URL
- It’s easy to set up – sending data via the Page Thing is built right into the Go to page action and is literally set up in a few seconds
- You can create permanent links to any page that includes a Page Thing, such as www.ecommerce/product/t-shirt and it will always load the database record along with the page
- You can change the Page Thing without reloading the page
- You can easily add meta tags and social media images to your Page Thing
Cons
- The Page Thing only supports database records – it can’t be used to send other values like a string of text or a number
- One page can only handle one type of Data – a Page set up to load a product will not be able to load an article
- You can only send one piece of data at a time – if you want to pass multiple parameters to a page, you need to use another method (but you can combine methods)
In some ways, the page Thing is how Bubble intends for you to set up pages where a specific data record (like product or article) has its own URL. Other solutions don’t provide those pretty URLs but can offer other upsides. Let’s have a look.
Pros and Cons of URL Parameters to send Data to a Page in Bubble
URL Parameters are similar to the last method. Just like the Page Thing, you place things in the URL of the browser that lets you send data to a page in Bubble.
Pros
- It’s flexible – You can use it to load any number of Things and any type of data
- It can be used to store both settings and data – for example, you can use one URL Parameter to navigate to a specific section of the page, and a different one to load some specific data
- This also means your Users can use the full URL to link to highly specific data in your app – just like you can link to a specific mail in Gmail or a specific task in Clickup
- You can change the URL Parameter on the same page without reloading the page
- They are slightly slower than using the Page Thing, since Bubble will load the page first and then whatever is stored in the parameters
Cons
- URL Parameters are not strictly a part of the URL’s path – they are indeed extra parameters in addition to the URL and can leave you with long, complicated strings. Traditionally, search engines are not huge fans of this structure
- URL parameters can be difficult to keep permanent, since the order of the parameters can change based on when they’re applied
- Tech savvy Users can experiment with the parameters and change their values, opening up for security vulnerabilities
So as we can see, URL parameters offer more flexibility than the page thing and are great to use in specific scenarios to send data to a page in Bubble. You can easily set the data source to get data from page URL to extract whatever data you need from the URL bar.
Generally, Page Things are often used for front-end facing pages (like an article) while URL parameters are used more for back-end systems (you’ll see apps like the Bubble editor, Gmail, Google Drive, Clickup and Notion use this frequently). The reason for this is to be kind to the almighty search engines – although they are becoming increasingly accepting to using URL parameters without registering it as duplicate content. Sending custom data between Pages is also easier with URL parameters as they can contain any kind of content.
If you decide to use URL parameters, you can inform Google which parameters to ignore and which to crawl by using their URL parameter tool.
Pros and Cons of Using the Database to Send data to a Page in Bubble
A third method for knowing which data to load on a new page is to save the information on the Current User and then reference that attribute on the page itself as needed.
Despite what you may think, this doesn’t actually require a User to register an account in your app – as we discuss in The Ultimate Guide to Bubble Security, Bubble creates a temporary User for every visitor to any page in your app, and you can store information on that User in your database as much as you want. As soon as the User registers for an account, the temporary User is converted to an actual one, including all the data you saved on it.
In other words, you can safely use attributes on a User to tell Bubble what to load or display on a page. Let’s look at the pros and cons.
Pros
- It’s permanent – at least until you overwrite it. While Page Things and URL Parameters can easily be edited or removed by the User, you retain full control over what you actually save in the database
- It’s more secure – any information you add in the URL bar of your browser is visible in plain sight to your Users. If you prefer to keep this hidden, you can use the database to make it harder to see. Note that we’re saying more secure here – not secure. As long as it’s loaded onto the page, it’s possible for the User to see it in the browser’s Developer Tools
- It’s very flexible – you can save any kind of information on the User, including Lists (arrays) of Things
Cons
- It requires the User to be logged in or stay on the same device – since the data is saved on a specific User, that User has to be identifiable by Bubble
- It’s not SEO friendly: since we’re not using the URL to identify the information we’re loading, search engines will be confused by what the content of the page actually is. Using a Page Thing will create unique URLs for each record in your database, but using the database will leave you with just one URL no matter how much data you send to the page
While this is a more unusual option, there are sometimes good reasons to use the database to point Bubble towards the correct data. If you have a cart page in an eCommerce store for example, it can make sense to fetch the cart stored on the Current User instead of relying on a unique URL to get it. In that case you would need to set up workarounds in case the User simply removes that part of the URL.
How should I send data to a page in Bubble?
As is often the case when you’re building software (no matter the framework), there are usually multiple ways to reach your goal. As we’ve explored, there’s no right or wrong way to send data to a page in Bubble. Before you set anything up, take into consideration the pros and cons of each method. Below are some questions worth asking before you make your decision:
- Do you want to set up a unique URL for the data you are sending?
- Is this data a part of your SEO strategy?
- Are you ok with making some data visible to the User in the URL?
- Are you ok with the User being able to manipulate the data stored in the URL by editing it?
- Do you want Users to be able to share or bookmark a link to the Data?
- Are you ok relying on a User that may log out or change their device?
Remember to plan out the process before setting up the workflows. Even just a simple operation to send data to a page in Bubble can be slow to backtrack if you change your mind. Use the pros and cons in this guide to determine the best way to do it.
If we’ve missed anything or you have any questions, let us know in the comments!
