repos / starfx

commit

a29e562

parent

ab4f169

author

Eric Bower

date

2024-08-18 18:54:17 +0000 UTC

docs(learn): preload then refresh

 1@@ -74,3 +74,31 @@ functions, just use the
 2 We highly recommend reading the
 3 [Thinking in Effection](https://frontside.com/effection/docs/thinking-in-effection)
 4 page because it should help here.
 5+
 6+# Data strategy: preload then refresh
 7+
 8+Preloading is a first-class citizen in `starfx`. It is the primary use case for
 9+using it.
10+
11+The idea is simple:
12+
13+> Preload most of your API data in the background and refresh it as the user
14+> interacts with your web app.
15+
16+This is the biggest performance boost to using a single-page app. Since routing
17+happens all client-side, it's beneficial to download data in the background
18+while the user navigates through your web app. While you might be fetching slow
19+API endpoints, it feels instantaneous because the data was preloaded.
20+
21+When the user lands on your web app, initialize a preload thunk that will
22+essentially sync the user's database locally, then when they navigate to a page
23+that requires data, refresh that data as needed.
24+
25+For example, let's say the root page `/` requires a list of users while the
26+`/mailboxes` page requires a list of mailboxes.
27+
28+One the root page you would not only fetch the list of users, but you would also
29+fetch the lists of mailboxes. When the user finally decides to click on the
30+"Mailboxes" page, the page will act as if the data was loaded instantly because
31+it was preloaded. So the user sees the data immediately, while at the same time
32+you would also re-fetch the mailboxes.