is Astro SPA a good idea?
Okay the plan is this (say we are making a dashboard or some other form of web apps, ignoring SEO stuff):
- Create an astro project
- have only a [...app].astro file in the routing, which contain an <App/> react component
- handle everything else inside <App /> like a classic React SPA app
It's probably not the type of things astro was built for, but what are the actual downsides of this I can expect versus other ways of making the same app (say t3 stack for e.g.)?
38 Replies
its a bad idea
astro is more for a static html, to the point of shipping 0 js by default
i know that its not what astro is for, and that i won't benefit from what astro provide by doing this
but what astro provides isnt really an issue for an SPA so I don't really miss it (like having a dashboard ship 0 js is pretty low on my priority list)
I have a hunch that it prob is a bad idea, but im having trouble coming up with what the actual downside is, hence why I made the question
the ideia of astro is to be a lightweight with 0 js
spa is the total opposite
you need auth and bunch more of stuff
auth is a good one, since ive only been using next-auth for that
what do non-metaframework react user use for auth anyway?
next auth is fine
can you use next-auth outside of nextjs?
you can use something from a provider such as auth0 as well
next auth is more a convenient tool to authentication
itself doesnt manage identities and such
if you try to use email and password with next auth
"The functionality provided for credentials based authentication is intentionally limited to discourage use of passwords due to the inherent security risks associated with them and the additional complexity associated with supporting usernames and passwords."
ye i used next auth so i know what it does
and ye it is convenient, and thus if there's nothing equivalent in the hacky stack i described to handle auth then its obv a DX downside
im not the biggest fan of next auth
but it works well
same
but atm its the best option in next i think
if you dont want to pay
yes
you have some auth providers to use
like clerk
auth0
but if auth is the only thing holding what i described from being a reality its prob not that far off?
you need dynamic content
so you have to force astro to serve js
on every component you force
but at that point you are going against what astro proposes
yes
but other react SPA would be serving js in every components too
thats not a downside of this versus other stacks
because its their default
that not the case for astro
but what am i sacrificing here by going against astro's default?
does it make it worse for devs to work with? We established auth stuff above, but other than that I don't see what's missing. Like I can use sth like tanstack location or any other router solution for routing, and i can even set up trpc too
does it make it worse for users to use? It should feel exactly like any other SPA react apps so I think no?
if you are going to use the tanstack router
why even bother with astro?
thats the main issue
everything else makes sense
but i dont understand where astro is useful
All the auth stuff I've done is okta based, but even that I try and have very minimal code on the frontend
And then on the backend just simple session auth
well say you have a marking site + an app
the app makes sense as an SPA, but the site make sense as static pages
I can use next.js for both, but then my static pages are having more js than they need to be
I can separate the sites and the app to 2 different things, but now I have 2 different things
but if the way i described above is feasible for e.g., I can have a
pages/app/[...app].astro containing the entire react SPA app, and all the other marketing pages still be static with as little js as possible
I think theres def a lot of value if astro can be a framework thats made for static pages, but can still stay out of the way enough for an SPA appif you want to use so much
then use it
ye was wondering if it is a viable option and if there're any tradeoffs that i am not aware of
Corn this is a terrible idea and I'm confused why you're even considering it
If you want to build an SPA use vite, remix, next, etc
because im trying to figure out what makes it a terrible idea
maybe the title makes it sound like i actually think its a good idea
i think its terrible, but i cant understand what makes it so
Because there are other frameworks that are designed for what you want, and provide you with better tooling
ye thats what i was seeking
what better tooling are we talking about here?
This isn't any different than building a next app with a single [page].ts and using react router inside
Vite, Remix, Next would all be better options
so it's bad because i'm trying to reinvent the wheel and will have to set up things (like routing) that other tools (like next) already set up?
but isn't it worth it if it allows me to access the static no-js-first pages that astro offers? considering a lot of stuff next offers aren't unanimously liked (like file system routing or gssp), its not as big of a downside i feel
or are there much more important tools than just routing & data fetching that im leaving completely outside of the question rn?
sorry if i sound super dense, i pretty much am
just that i feel like why should having only a small react (or any other framework) component in a page be the limit of astro?
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
i see
so in short the downside will be on the DX side and its up to me to determine if getting access to astro's static stuff is worth that hassle is what im gathering
thank you all for putting up with my stupid question
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
Yeah Solid looks great from what little I've seen of it during Ryan & Theo's interview
I've been intending to try it out this weekend
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
I'm not a fan of next.js either but to be fair, once rsc's become more fleshed out you can have static pages with very little js
passport.js is pretty good on the backend side, not much help on the frontend though
Seems like what you want isn’t purely an Astro SPA, but rather a sort of hybrid app where some stuff is SPA and some is MPA. I don’t have a good solution for you but the discussion is interesting. How to blend state management and especially routing between the two approaches is a weird thing, but I think at least Solid Start is considering something like it.
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View