T
TanStack16mo ago
quickest-silver

How can I disable the loader instantly returning the last route's data when I press "back"?

Example here: https://stackblitz.com/edit/tanstack-router-1finlk?file=src%2Froutes%2Ft%2Findex.tsx The example has the main page which has a loader that waits for one second, then generates a random string which is displayed by the route's component. 1. Look at the generated string 2. Navigate to another page by clicing on the link 3. Now go back (StackBlitz doesn't have a back button so right click and choose "back") The original string is now displayed for 1 second until the new one is generated at which point it updates. Is this Tanstack doing the caching, and if so can I disable it? The behaviour I am looking for is that the old page stays up until the loader has completed at which point the previous page displays with the fresh loader data. Alternatively displaying nothing at all until the loader has completed would be fine for my use case.
Dave Keen
StackBlitz
Router Quickstart File Based Example (forked) - StackBlitz
Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz
3 Replies
correct-apricot
correct-apricot16mo ago
set gcTime: 0 in route options or defaultGcTime in router options
correct-apricot
correct-apricot16mo ago
Data Loading | TanStack Router React Docs
Data loading is a common concern for web applications and is related to routing. When loading a page for your app, it's ideal if all of the page's async requirements are fetched and fulfilled as early as possible, in parallel. The router is the best place to coordinate these async dependencies as it's usually the only place in your app that kno...
quickest-silver
quickest-silverOP16mo ago
As simple as that! Thanks so much for your help!

Did you find this page helpful?