Why is the current loader invoked when hovering over a child link?

[b2m9]

I've noticed a behavior in the basic example that I cannot explain.

On route /posts, I observe that when hovering over the Link component pointing at route /posts/$postId it will trigger the loader function of /posts/$postId and /posts. It also seems that while the loader for /posts/$postId seems to adhere to the 30 sec cache time, the loader for /posts is being invoked over and over again.

Why does it trigger the loader of its own route at all? Even adding something like staleTime: 10_000 doesn't seem to stop it in all cases (I've seen cases where it loads again after 2 seconds).

Can someone explain this behavior and how can I change that? Constantly fetching all posts is a behavior that I don't need.

[Scholar01]

I also found the same problem and was also confused

[airtonix]

@b2m9 perhaps you're experiencing this behaviour

router.tsx

export function createRouter() {
  return createTanStackRouter({
    defaultPreload: "intent"      // 😅
  })
}

https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#defaultpreload-property

[b2m9]

Not really, preloading explains you would invoke the loader function of /posts/$postId (the target route) - which is the expected behavior. But the default behavior of Tanstack Start/Router seems to be to invoke the loader of the current parent route /posts as well. This triggers dozens of requests that are being cached. And that is some really weird behavior.

FWIW, someone on Discord said that this is the current intended behavior and you basically have to work around this with client-side fetching and Tanstack Query. 🤷‍♂️