Can I use t3 for single page apps?
I've heard next js isnt great for spas, so im wondering if its doable with t3 or if i should pick a different framework. thanks
28 Replies
SPAs is the only thing Next can make
I would be lying if I said that didn't confuse the hell out of me
I have a guess on what I think you mean, but can you elaborate?
SPA means the server sends one html page (Single Page) and then JavaScript takes over
That’s how Next works
Ah yeah, if that's the definition of SPA, that makes sense
the only difference IMO is a SPA application, using Vite, for example, is easier and cheaper to deploy than nextjs
but if it's not a concern, I don't thnk there's a reason for not using next
you can actually also statically export your nextjs app, so I'm actually talking shit rn
every nextjs site ive seen is multi page
also it makes a pages folder on init, what is that for?
having different different routes, as entrypoints
the app you want to build has only a single route?
im not 100% on what routing is, but basically its just one page and has a bunch of toggleable modules, almost like a dashboard type thing
ah, I see, alright, so just to prevent some confusion, when the term "SPA" is used, it's usually talking about applications that have only one page, or "only one html file", not that it's a page with only one router, "or only one url"
That's the confusion I had, but essentially, having multiple pages doesn't mean it'll load multiple pages.
According to cje, what Next does is send only one page, always
That's a very technical and slightly ambiguous definition
sorry, im still a bit confused, if it has multiple pages, how is it not going to load multiple pages?
yeah, I totally thought SPA was more of a design term lol
there's some ways of handling multiple pages / multiple URLs, in your application, the traditional way is each page is hosted ("stored") in a different file on the server, and every time you reach this URL you are grabbing this file from the server
My dumb explanation would be: when you click on a link to go to another page (another route), Next will send only that page to you and the page that you had before will "be replaced" by the new one
is that not an mpa?
No, because you are still only using one page
You're only rendering different stuff in that page
the way nextjs works is, the first time you reach a page, it's going to send the full content of that page, for example all the libraries, stylings, etc, But when you go to the second page, only the content that is different is going to be send to you
Christopher Ehrlich
YouTube
You need to understand this about Next.js
Ryan's excellent stream: https://www.youtube.com/watch?v=QS9yAsv1czg
Repo used for the demo: https://github.com/c-ehrlich/next-is-an-spa
Find me on Twitter: https://twitter.com/ccccjjjjeeee
ah ok thats a great explanation
also thanks for the video
think of an spa like a desktop app, all of the logic and ui for the entire thing is loaded once (nextjs doesnt work exactly like this but good way to think) and 'routing' simply changes the internal state of the 'app'
Also just open the network tab (on a built site, not in dev) and see what it sends you on initial load, clicking a link, etc
where an mpa is a completely fresh brand new page and everything on navigation
This isn’t necessarily true, you can bundle split, lazy load, etc in an SPA (and almost of the good ones do)
was already editing
was trying to simply for the purpose of understanding
imagine a CRA with zero bundling
idk if you know what that it
create react app?
yea so cra is the classic 'spa'
ok ok that makes more sense
thanks for the help guys
but answering your initial question clout, yes, you can use t3
just use what you think it's cool
if you like watching t3 videos or like the content it's enough
you're more likely going to reach some barriers if you use a SPA like CRA or Vite than using nextjs from the beginning
imo