foreign-sapphire

SPA mode in Dev

Hello :). Can we use the SPA mode in dev (meaning no SSR at all) ? I understand it is possible after building (so for production I guess) Thanks in advance :).

33 Replies

deep-jade•3mo ago

you will be soon able to disable ssr for all routes (including root) which is pretty much the same then

fair-rose•2mo ago

Hi @Manuel Schiller, Thank you for your work on the SSR setting per route, I just to confirm my understanding regarding your answer above^ Does that means we can either ssr:false (default= false anw) in root route or

spa: {
        enabled: true,
      },

spa: {
        enabled: true,
      },

to enable SPA mode? Because in SPA mode guide, we have to setup some redirects but if ssr:false by default, it doesn't look like we have to setup anything? (unless i missed some doc)

deep-jade•2mo ago

yes the difference is in hosting with spa mode you host a static file with ssr:false the requests hit the normal server

fair-rose•2mo ago

ahhh I see, so if I host my app on cloudfare page - without SPA mode, when it hits cloudfare, it is counted as non static page - with SPA, it is static page?

deep-jade•2mo ago

yes

foreign-sapphireOP•2mo ago

I'm sorry but i'm really confused lol. If I want no SSR at all, meaning in dev and in prod, what settings should I use exactly ? Also I don't really understand the difference between static / non static page depending on SPA mode or SSR: false.

deep-jade•2mo ago

spa mode is not yet respected in dev. now that we have ssr:false we can easily do this. so not a big lift

fair-rose•2mo ago

Hi @Manuel Schiller , I'm not sure if my observation is correct, but when I disabled ssr in root route, if I used component instead of shellComponent, the app would be empty. I was struggling to find solution for the problem since the doc didn't mention shellComponent. Only to managed to find answer by cloning start-basic and disabling ssr there and stumbled across the shellComponent. Is it meant to be like that? snippet:

export const Route = createRootRoute({
    ...
    shellComponent: RootComponent,
    ssr:false
})

export const Route = createRootRoute({
    ...
    shellComponent: RootComponent,
    ssr:false
})

deep-jade•2mo ago

yes I need to document this you can still have a route component in root however the html shell needs to be put in shellComponent

ambitious-aqua•2mo ago

is it possible to make spa to only specific route and rest can use normal ssr and stuff? Just like SSG with nextjs.

deep-jade•2mo ago

how would that look like at runtime?

ambitious-aqua•2mo ago

It should server the complete static html page for that route insted of running any SSR stuff. In context of my project. i have /all_categories route which intially fetch data from a db and show all the category name. but since data in DB are not changing frequently for /all_categories i want to make that specifally page as a static page. so on a build it should fetch and generate html with all the categories and when i deploy it to server it should serve that pregenerated html page. So is it possible to do it for specific routes like here for /all_categories.

deep-jade•2mo ago

wouldnt you rather use CDN level caching here?

deep-jade•2mo ago

but what you are really looking for is https://tanstack.com/start/latest/docs/framework/react/static-prerendering probably

Static Prerendering | TanStack Start React Docs

Static prerendering is the process of generating static HTML files for your application. This can be useful for either improving the performance of your application, as it allows you to serve pre-rend...

deep-jade•2mo ago

docs totally outdated we have a thread about that here: https://discord.com/channels/719702312431386674/1388987771116585160/1389161757951397949

ambitious-aqua•2mo ago

any chance that doc will be updated?

ambitious-aqua•2mo ago

this is working but even with path specified it still do the prerendering for all other routes aswell

deep-jade•2mo ago

yes for sure can you please create a github issue for this?

foreign-sapphire•2mo ago

how can we pass the context to the router provider on Tanstack start? thee context is actually react hook

fair-rose•2mo ago

I was gonna ask sorta similar question: if the way we implement context is similar to how we implement context in tanstack router @Manuel Schiller

deep-jade•2mo ago

is this for SPA mode? or in general

foreign-sapphire•2mo ago

yeah, for SPA mode

deep-jade•2mo ago

right now thats not possible. we would need to allow setting router context on <StartClient> needs to be well documented that this only works with SPA mode and that the context would not be available in the root route during build

foreign-sapphire•2mo ago

aha, thanks

fair-rose•2mo ago

Is it accurate for me to override the client.tsx then return the RouteProvider with context back to render it out like this? I tried but it looks like I'm getting rendered HTML mismatch I would appreciate a lot if you have a look at the otehr thread too Manuel 🥹

foreign-sapphire•2mo ago

it is broken again 😦 after updating to the latest version, it is not working as expected, most things are rendering on the server despite it is configured as spa app

deep-jade•2mo ago

which version are you on? which version before? how does you setup look like?

foreign-sapphire•2mo ago

i was on version 127.0, now on 1.128.3

        tanstackStart({
            spa: {
                enabled: true,
            },

            customViteReactPlugin: true,
            target: "cloudflare-module",
        })

        tanstackStart({
            spa: {
                enabled: true,
            },

            customViteReactPlugin: true,
            target: "cloudflare-module",
        })

foreign-sapphire•2mo ago

root.tsx

foreign-sapphire•2mo ago

on any route, on first load it is saying: Uncaught Error: Switched to client rendering because the server rendering errored:

deep-jade•2mo ago

and which error did the server log?

foreign-sapphire•2mo ago

localStorage is not defined i just moved all of my routes downwards, and added any client side things there with ssr false, everything is working fine now, i guess before the route component itself was client side but it is not anymore i guess.

deep-jade•2mo ago

root route is always rendered on the server when spa mode is on anything below is not

Gaming

Programming

SPA mode in Dev

Did you find this page helpful?