TL;DR

Loading data from the database takes time — sometimes milliseconds, sometimes multiple seconds. If you load the data before the page loads, by using URL params or the Preloader, your user might have to wait longer for the page to load, but they won't see any loading spinners or flashes of blank data. If you use a utility, the page will initially load faster but the user may initially see a spinner or blank list until the Utility got it's data back. As a general rule, if the data you are loading won't be visible on the page right away, use a utility. Otherwise, use URL params or the preloader workflow

Why have different ways to do the same thing?

Excellent question! When working on these features, we realized there was no one "best" way. All of the features listed below come with benefits and tradeoffs. We'll go into more details below, but if there is one thing to remember, its that Loading data from a database TAKES TIME. Sometimes even a long time. Most of the time, the questions about which strategy to use will comedown to how and when you want your user to wait for the data to load.

Data loading timeline

The image below represents a simplified version fo what happens when a user visits your page in Devize. If the server / browser distinctions here are confusing, checkout our page called "How the web works"

Lets start at the top and work our way through each step

Load the user

If a user is logged into your app, that is the first thing we'll load. You won't have much control over this, but its worth noting that it happens first. Of course, if no user is logged in, this step is skipped

Load the page params

In the settings for a page, Devize lets you add parameters to the name/path of your page. This makes it possible to have pages with dynamic (or changing) parts of the URL. The example below shows a page with a post parameter

These will be loaded immediately after we load the current user. Of course, if no page parameters exist, then this step is essentially skipped.

If you added a page with the parameters, but kept the type as "text", then we don't actually need to load any data, as we can just get the value from the URL itself

Run the Preloader

Every page in Devize has a special preloader workflow. This workflow is kind of like a Swiss army knife. You can use to to redirect the user to a different page if they are not logged in. You could use it load more data that the page needs. You could also use it to send analytics events anytime the page loads. Perhaps the most important thing about the preloader, is that it's the last step that will happen on the server

Render the page

This is admittedly, not about loading anymore data, but it's important to know when this happens. All the data from the first three steps are sent to the browser and we render, or show, the page to the user. All of the data loaded before now will be available. Until this step, the user isn't shown anything and is waiting for the page to load.

Database utilities run

After the page renders (or you might say loads) for the first time, then any utilities used to load data run. The key insight here is they run AFTER the page loads. That means if you are showing the user a list of posts you loaded from a utility, the first thing they would see if nothing (or some other UI like a spinner you added). Half a second later, the page will then re-render with the data from the utility now available.

Conclusion

We want apps built on Devize to feel lightning fast. How and when you loads data will probably have the biggest impact on performance, so keep it in mind as you build.