equal-aqua

first page nav slow even on purely spa routes

is it expected that, even with ssr: false and no network requirements for a route, that the first client navigation will be slightly delayed? is there something going on behind the scenes i'm not accounting for? i have a couple really basic routes for testing, eg.

function ProfileRoute() {
  return <PrimaryHeading>Your Profile</PrimaryHeading>;
}

export const Route = createFileRoute("/_protected/profile")({
  ssr: false,
  component: ProfileRoute,
  loader: () => ({ crumb: "Profile" }),
});

function ProfileRoute() {
  return <PrimaryHeading>Your Profile</PrimaryHeading>;
}

export const Route = createFileRoute("/_protected/profile")({
  ssr: false,
  component: ProfileRoute,
  loader: () => ({ crumb: "Profile" }),
});

when i do a fresh load with slow 3g on chrome, and then navigate here, there's a slight delay just before the navigation begins wondering if there's something involved that i'm not accounting for? i don't see any network activity in the dev tools, no logs on server, but still a noticeable delay (noticeably slower than on subsequent navs after the first one). most my data will be coming from idb in the future, so i expect basically instant client navigations regardless of network latency, so i just want to solve this now rather than later i can add a video for reference if that would be helpful

17 Replies

adverse-sapphire•6mo ago

what's a "fresh load"... "then navigate here" ? are you react 19? might be caused by React 19 adding an artificial 300 ms delay for suspense (which is happening because of lazy loading the route)

equal-aquaOP•6mo ago

hard reload chrome (cmd shift r in chrome), loads in / then i navigate via link to /profile ok let me check

adverse-sapphire•6mo ago

the "ssr: false" part has no effect here for client side nav

equal-aquaOP•6mo ago

yea, i just meant to confirm that i wasn't making a network rt for the html and yes, react 19- is this implicit? i'm not using suspense anywhere that i know of

adverse-sapphire•6mo ago

see above, lazy loading the route JS chunk

equal-aquaOP•6mo ago

right, is the lazy load implicit to tanstack router? and any way to avoid such?

adverse-sapphire•6mo ago

the lazy load is automatically yes we have prototyped a hack to prevent react from imposing this 300 ms "penalty" but not published that

equal-aquaOP•6mo ago

gotcha, so right now it's either eat the 300ms, or don't use 19?

adverse-sapphire•6mo ago

yes. we'll work on that after we finish our migration off vinxi

equal-aquaOP•6mo ago

the only weird thing is i don't notice this without throttling the network in chrome. with default, there is no perceivable delay

adverse-sapphire•6mo ago

hm maybe because of the prefetch that happens when you hover the link?

equal-aquaOP•6mo ago

this is with throttle and hovering for quite a while (will record non-throttled behavior)

adverse-sapphire•6mo ago

you are using the dev server here, right? does not make much sense to throttle that do the same on a prod build

equal-aquaOP•6mo ago

no throttle

equal-aquaOP•6mo ago

ok, i'll try that

xenial-black•6mo ago

Out of curiosity how did you hack this ? I found this change to react to be really annoying

adverse-sapphire•6mo ago

via useSyncExternalStore

Gaming

Programming

first page nav slow even on purely spa routes

Did you find this page helpful?