Is there a way to get beforeLoad to run on the client? I have tried enabling SPA mode
I feel like there's some config I'm missing somewhere. No matter what I've tried, any console log prints in my dev server, not in the browser console. Should I drop Start and just use Query + Router?
25 Replies
wise-white•3mo ago
its runs on both server and client.
on first load it will run on the server only
but try hovering another link, you will see it running on the client
rare-sapphireOP•3mo ago
I think I might have the wrong mental model. The goal is to only serve static files from a CDN. The company already has a BE and doesn't want to run a server for FE. True SPA style. I was hoping to check for a logged in user in beforeLoad, which doesn't work if the first call runs serverside.
If this is my goal, should I even be using Start at all? Or just Router? Thank you for answering
extended-salmon•3mo ago
Hi, actually TSS is a universal framework wich SSR mode means everything runs on the server for the initial load. But as I see, in SPA mode it’s just a simple SPA — no server needed. Have you tried it?
extended-salmon•3mo ago
SPA mode | TanStack Start React Docs
What the heck is SPA mode? For applications that do not require SSR for either SEO, crawlers, or performance reasons, it may be desirable to ship static HTML to your users containing the "shell" of yo...
rare-sapphireOP•3mo ago
Yeah, enabling SPA mode seems to have no affect on the server. My loaders still run on the server (and consequently die on the Query requests). I have been desperately combing docs trying to find what setting I might be missing to fully disable the server
extended-salmon•3mo ago
ahh , did you build the project ?
extended-salmon•3mo ago
Selective Server-Side Rendering (SSR) | TanStack Start React Docs
What is Selective SSR? In TanStack Start, routes matching the initial request are rendered on the server by default. This means beforeLoad and loader are executed on the server, followed by rendering...
extended-salmon•3mo ago
I think in dev mode you need this
raw-harlequin•3mo ago
which loaders? on SPA mode the root loader runs on the server . any other loader does not
extended-salmon•3mo ago
Only in production or both ?
raw-harlequin•3mo ago
both
rare-sapphireOP•3mo ago
Hmm okay. I want to check authentication on every route, so I assumed the best place to do it was __root. But if that runs on the server and I don't have the Query context available, then that doesn't work there.
But this goes back to my question of whether I am just not understanding Start. I would like to do pure SPA, no server (company doesn't want FE server). Meaning I can't have anything running on the server, even the root loader. Is this possible in Start or do I need to use something else?
raw-harlequin•3mo ago
we can relax this I guess. if ssr:false is set on the root route it should not run the loader on the server.
however today with spa mode the root loader only runs once on the "server" which is during prerendering during build
if you don't want any FE server and don't want SSR, why not just use ttanstack router ?
rare-sapphireOP•3mo ago
That is what I've been wondering. Sorry, there's a lot of documentation and it takes a while to get a good mental model of how everything relates. Maybe something could be added in the docs on the SPA Mode page about how this is not pure SPA, there is still a server, and if you want pure SPA then you should only use Router?
raw-harlequin•3mo ago
isn't that clear enough?
https://tanstack.com/start/latest/docs/framework/react/spa-mode#why-use-start-without-ssr
SPA mode | TanStack Start React Docs
What the heck is SPA mode? For applications that do not require SSR for either SEO, crawlers, or performance reasons, it may be desirable to ship static HTML to your users containing the "shell" of yo...
raw-harlequin•3mo ago
if not you are very welcome to submit a PR to the docs that helps improve the wording here
extended-salmon•3mo ago
Ah, is there any tutorial for migrating from router to start?
I think something like SPA flag would be useful when we want two versions of the app: one to show SPA to users and browsers, and another to show SSR to crawlers.
raw-harlequin•3mo ago
spa flag?
extended-salmon•3mo ago
sorry , spa option in tanstack start plugin
raw-harlequin•3mo ago
that's existing already
rare-sapphireOP•3mo ago
I read that page multiple times and it was not clear to me. When I read Why use Start without SSR? it sounded like you could optionally include server functionality. For me, it would have helped a lot to make it explicit on the SPA docs that Start is an obligate server environment and SPA doesn't opt you out of that, merely switches the way you interact with that server
raw-harlequin•3mo ago
well if you don't use server functions nor server routes, you effectively don't have any server functionality and thus have a pure spa
but for that setup really you should use router
rare-sapphireOP•3mo ago
The company doesn't want to add infra for an FE server, they just want us to talk to the BE directly. Wondering what your opinion is on my wording here https://github.com/TanStack/router/pull/5139
GitHub
Add Pure SPA section to SPA Mode page by BennyHinrichs · Pull Requ...
Let me know if you think this is an alright addition to the SPA Mode page. I spent like a whole day trying to get SPA mode to work without an FE server before asking in the Discord and learning tha...
extended-salmon•3mo ago
So, isn’t there any way to run the loader in the root on the client, even with ssr: false?
It’s the same in RR7 — the root gets prerendered there too, probably because the HTML has to be generated first.
raw-harlequin•3mo ago
as I wrote above, we could allow this if you have a shellComponent set so the shell can be prerendered
if you dont use SPA mode, this is already working