Loaders and Prefetching
TanStack Start routes can have isomorphic loader functions that run on the server for the initial pageload and on the client for subsequent client-side navigations.
These three links navigate to subpages that show chat messages from different channels. Notice how client navigations between these pages work differently.
Awaiting ensureQueryData
will block rendering of the page until that data is available and calling prefetchQuery
will start the request but not block. Loaders also run during prefetching, triggered by the cursor mousing onto a link in TanStack Start by default.
When to use a loader
Loading a query in a loader ejects from the convenience of component-local reasoning through useSuspenseQuery
where a component fetching its own data to the cold reality of fast page loads when you need it.
Learn More
Tanner's An Early Glimpse of TanStack Start video