Big array of data in the frontend

Ask us anything How do I?
1

I have a static collection in my Xano and am thinking about putting this collection as an array var to Weweb to decrease number of API calls.
Is it ok to store an array of 250 objects in Weweb?

2

Hey @George :wave:

Without knowing anything about your use case, I wouldn’t recommend that approach.

It is okay in theory but there are a few things to consider:

  • if there is any private information in that array, you don’t want them in a WeWeb variable that will be loaded in the user’s browser

  • how heavy is that array? do the objects include heavy files that might slow down the user’s browser significantly when they try to access the page?

  • if you try to display the 250 objects on the same page, it will significantly slow down the user’s browser so you’ll need to fake a pagination which may be less straightforward to setup with the array variable.

May I ask why you’re trying to decrease the number of API calls? Is it affecting the page load time? If that’s the case, you might want to optimize when and how you load collections.

For example, you could stop some collections from fetching automatically and trigger the fetch on the click of a button:

CleanShot 2023-02-22 at 19.33.53@2x
CleanShot 2023-02-22 at 19.33.53@2x1878Ă—1216 198 KB

And/or you could fetch the collections you need in parallel to save time:

CleanShot 2023-02-22 at 19.35.28@2x
CleanShot 2023-02-22 at 19.35.28@2x3408Ă—1178 363 KB

Does that help?

1 Like
3

Hey Joyce. What is the difference between fetching a collection and fetching a collection in parallel? What are some use cases?

4

Hello Joyce. Thanks for the detailed answer!
Here is my case.

  1. There is a registration form on the main page and it is not always used, but only when the user purchases the product. But the form sends an API request every time to get a list of countries, even if the registration form is not used this time.
  2. The list of countries is implemented through a drop-down list. The user’s country is determined by his API (IPAPI service) and is automatically set to speed up registration. So the array with countries I can’t load later
5

Fetching in parallel is very useful if you have to load multiple collections at the same time (without specific order). That way, you won’t wait for a collection to load before loading another, which takes a lot less time!