What is the best way to fetch bootstrap data?
I want to fetch some bootstrap data when a user first loads the app. This data includes feature flags and the list of workspaces of the user and their preferences, etc...
From my understanding of the framework so far, there are multiple ways of doing this:
- Using TanStack Query (or some other library) with client-side caching: However, I would ideally like this to be done on the server-side instead, and preferably just by using the primitives of the router.
- Using beforeLoad with staleTime set to Infinity: This forces me to use a pathless layout specifically for the data that I want to cache, additionally it makes it run twice: once on the server and once on the client, which is not ideal (ideally this would be ran only once, on the server).
- Some other mechanism that I do not know of? I was considering onEnter but then I would have to save the context outside of the router. I feel like there is a missing Route Option that could resolve this issue though.
So my question is: What is the idiomatic way of doing this in Start? And how have others resolve it so far?
10 Replies
wise-white•3mo ago
Did you consider using a middleware to achieve this?
stormy-goldOP•3mo ago
Umm.. No? I thought middlewares don't apply to routes, only to server functions.
Is that not the case?
wise-white•3mo ago
Don't you use server functions? You can create a global middleware. So, you can control this data loading after the user login.
quickest-silver•3mo ago
Could you fetch them in the root loader? That data would be accessible to all children routes
stormy-goldOP•3mo ago
I must be missing something. How, and especially where, do I transmit that data to the client if I handle this in a server function?
The problem with this is that the loader will be executed on the server, on the client, and then on the client every time the user navigates through the routes. I'm using this for some other operations, but not for bootstrapping yet.
quickest-silver•3mo ago
You could probably achieve what you're talking about with
ensureQueryData and useSuspenseQuery https://tanstack.com/router/latest/docs/framework/react/guide/deferred-data-loading#deferred-data-loading-with-external-libraries -- await the ensureQueryData on the server, and then access it on the client with something like useSuspenseQuery and that will not refetch on the clientDeferred Data Loading | TanStack Router React Docs
TanStack Router is designed to run loaders in parallel and wait for all of them to resolve before rendering the next route. This is great most of the time, but occasionally, you may want to show the u...
extended-salmon•3mo ago
This sounds quite similar to what I was hoping to achieve as well. Load some configuration data / environment variables on the server-side only, so that the client side can use it, with the added bonus of hipefully being able to keep the whole rest of the app CSR
stormy-goldOP•3mo ago
Hmm.. It seems that this might indeed be the best way to do this right now. Thanks!
It feels bad to rely on an external library to perform the caching instead of just using the router primitives and its context for that though, so I hope the maintainers would come up with a better way at some point.
wise-white•3mo ago
Why don't you just put these data in http only secure cookies? It is not the best thing in the world, but works for most cases...
stormy-goldOP•3mo ago
@Felipe Stanzani there is too much data to put in a cookie that would be sent on every request + that would be highly unconventional.