client only route loader?
I want to fetch data from indexdb and use ensureQueryData to ensure the page doesn't load until it exists, but i get an error because indexdb doesn't exist in the ssr environment. remix has a concept of a client loader, does start have something similar?
37 Replies
absent-sapphire•8mo ago
You might just be able to check if window exists. Maybe kinda hacky tho
Actually I think there is a clientOnly function
gentle-gray•8mo ago
clientOnly or even createIsomorphicFn, which would make you more honest about what happens during SSR 😉other-emeraldOP•8mo ago
will clientOnly cause it to re-run on the client on initial load or will it just noop on the server? @Tanner Linsley -- ty for the response, appreciate it
do these functions exist currently, can't find in the docs
gentle-gray•8mo ago
They’re exported and typed. Undocumented though
ClientOnly() produces undefined on the server
So it won’t be callable
Only on the client
And, yes it will run on the client as long as the staleTime allows it to (which is 0 by default)
other-emeraldOP•8mo ago
staleTime on my react query client or stale time in the router's internal cache?
gentle-gray•8mo ago
Right on the route config 😉
Loaders are like mini queries
other-emeraldOP•8mo ago
yeah but i'm using queryClient.ensureQueryData in my loader, perhaps i should be using the routerWithQueryClient
gentle-gray•8mo ago
Yep
other-emeraldOP•8mo ago
is there a way to turn off ssr for a route? tried ssr: false but didn't seem to do anything
gentle-gray•8mo ago
No. Not yet
You could use not use a loader and do it all in the component
With Query
other-emeraldOP•8mo ago
i'm seeing the vision now. love what you're doing here tanner thank you so much for everything, have really made web apps fun again
gentle-gray•8mo ago
Thanks for trying it out!
other-emeraldOP•8mo ago
even with broken fast refresh tanstack start feels better than Next haha
gentle-gray•8mo ago
lol
Hopefully that’s not the case for long
Admittedly it’s the last thing on my list because it’s insanely hard to do right
But I’ll get it
other-emeraldOP•8mo ago
i was hoping it was an easy one
why is it hard? because of the server functions?
gentle-gray•8mo ago
It would already be done 😉
No
Fast refresh specs
It works with very specific rules and vite transformations
And because our route components are not top level exports, it doesn’t work automatically… among other challenges
other-emeraldOP•8mo ago
could you make the Route export a callable react component that returns its component property
from createFileRoute
gentle-gray•8mo ago
Lots of possibilities. But they’ll need to be done in a vite plugin most likely
other-emeraldOP•8mo ago
actually, while i have you, i keep getting this error on my deployed cloudflare app, on initial page load, but goes away if i refresh a few times. error is minified but looks like it's passing undefined to a json.stringify
other-emeraldOP•8mo ago
https://pnin.pages.dev/file/ app is here
gentle-gray•8mo ago
What is it trying to parse?
other-emeraldOP•8mo ago
can't figure it out, looks like something internal to tanstack router but i can't really tell
i was thinking it was my loader function result but i'm returning an empty object on the server
gentle-gray•8mo ago
Pause the debugger and look at the stack?
other-emeraldOP•8mo ago
well it's undefined, but, i was able to get the breakpoint to hit when it was working
other-emeraldOP•8mo ago
looks like the full router state?
other-emeraldOP•8mo ago
coming from the hydrate method
gentle-gray•8mo ago
TSR.dehydrated
Hmm
That gets embedded in the html response
other-emeraldOP•8mo ago
window.TSR is defined as well
other-emeraldOP•8mo ago
not sure if there's a race.
can you repro it if you click the link i sent
gentle-gray•8mo ago
Check the raw html response
Look for dehydrated
other-emeraldOP•8mo ago
i see it in here
eager-peach•8mo ago
react 19?
other-emeraldOP•8mo ago
yes
should it not be?
gentle-gray•8mo ago
All of our testing is still on react 18. We have yet to work out some small kinks with react 19.
Especially around SSR and hydration
eager-peach•8mo ago
we have an existing bug for react 19 about that
rising-crimson•8mo ago
slight correction - clientOnly and serverOnly functions throw when called in the wrong environment
whereas createIsomorphicFn no-ops if it doesn't have an implementation
gentle-gray•8mo ago
Oh good catch