router-core/data-loading

To implement data loading with TanStack Router, define a loader function on your route using createFileRoute, returning data for the component. You can access route params, dependencies, and context inside the loader function to fetch required data before rendering.

loaderDeps in TanStack Router is used to generate cache keys based on dependent search params. By specifying loaderDeps, you control when the router should refetch data versus serving cached results when search parameters change.

TanStack Router applies SWR-like caching defaults out of the box. It uses staleTime, preloadStaleTime, and gcTime configurations to manage cache freshness and garbage collection, reducing unnecessary refetches during navigation.

Yes, you can defer data loading in TanStack Router by returning a promise from your loader. The route can display an optional pendingComponent while waiting, and the Await integration handles rendering the resolved deferred data.

To type context in TanStack Router, use the createRootRouteWithContext factory pattern. This allows you to define a strongly typed context object that is passed into your route's beforeLoad and loader functions for safe data access.

TanStack Router provides built-in error handling for data loading. If a loader fails, the error is caught and can be managed using error boundaries or errorComponent configurations on the route, preventing the application from crashing.