Cache Route Loader Data in Tanstack Router

In this lesson, we explore how TanStack Router caches data returned from a route's loader function.

This caching mechanism is focused on the data fetched by the loader (!), not the component's rendered markup (i.e. unlike React's memo).

We learn how to view cached data using TanStack Router DevTools, where we can see details like the age, staleTime, and garbage collection gcTime for each route's loader data.

These settings control how long data remains fresh and when it is refetched or removed from the cache. For example, the stale time determines how long cached data is considered fresh before being refetched in the background, while the GC time controls how long data is kept after a route is unloaded.

Transcript

[00:00] 10-Stack Router caches the data that was loaded for a certain route. So this is not about the markup, the fiber nodes that have been returned from the component's function execution, not this one. It's about the data that has been returned from the loader function of a certain route. So let's walk into the 10-stack router dev tools, and let's walk into the employees route. Now here we can see that the employees route has been matched, and there are the numbers of age, stale time, and GC time.

[00:31] Let's walk into the employees route. And we would see that there is some loader data defined that it's an array of 50 elements. So essentially, this is the result of this loader function of the employees route. Now, when anybody is speaking in the docs or anywhere about caching the route inside TANSTA Cruder then it's always like these age, stale time, GC time and others it's always about the result of the loader function of a certain root.