A key factor in the decision of whether to go single-page is whether it is a "site", or is it an "app". There is a difference. A site needs seo more than an app. An app can be supplemented with a multi-page site that features the app. Also, with spa permissions gateways can and should be done on the server side; session management enables this to be accomplished.
I was having trouble getting out of the initial hype I felt when learning about SPA and actually make an objective decision on what I would do for my web app. This helped alot thank you!
Fantastic explanation!!! As you mentioned it’s clearly the time when island architecture is coming very strong as a developer and user experience, and I have to talk again about fresh which is also amazing as Astro does for static site, but with the ability of the route folder structure of nextjs + the island architecture for dynamic renders or state. Really hard to find our way in this “war” between ssr or csr, with the explosion of react it was the new way to go but it has shown some limits and we go back to ssr with amazing new frameworks like also qwick which is doing a great job with its signals system. That’s all amazing and so interesting and good to have a clear explanation as yours that comforts my thoughts and understandings 👍👍👍
At the end you mentioned SEO as a reason to use MPA. SSR and SSG in Next.js f.ex. using Server Components allows also to add SEO tags to the Html BEFORE it is sent to the user. This can be done for each route so that for home or any other route the meta tags are already included because the server already handled the rendering of the html. Also authentication can be handled fully serverside. One can simply read out the cookies from the request and check if the user is authenticated on tje server BEFORE sending/responding with the respective content. So the benefits of MPAs can all be included in SPA architectures as well so there is almost NEVER really a good reason to use MPA over SPA.
I like to write an MPA in Django and then use Vue for building interactivity inside a page if needed. Nice thing about Django is you can write a combination of templates and REST endpoints for the same set of models. So if I want to have faster initial load I can populate initial data on the server side and then have Vue call the API whenever the data needs to be updated.
just combine both of them i notice that with E commerce apps some pages is constantly needs fresh data from the server so i mixed both multi page and single page
James. I usually do multi page applications. Using node and vue inside html without vue cli. It is fast and easy to update and add new features. what do you think?
sometimes you can't choose... for example deploying things like "decentralized" frontends, where it does not exist a SSR concept, so SPAs will continue being improved, in things like SEO, performance, and usability, I think on the future both MPAs and SPAs will be on par but highly specialized in solving their challenges
I am favor of generating Static Web pages and then using JS for data islands or SPA like features that dynamically Morph a static into a Spa. So in the case if feedback from, the submission is posted without page reload and the main content area changes state without leaving page. What is key is to regenerate statics only when the important data changes. I am in favor of having the server generate statics instead of having to recompile and upload a website.
This is why Rails is growing again. With Rails 7 and hotwire you have your multipage application that behaves like a single page application where it needs to with out all the extra BS.
If I need a website where there will be 10 tabs, each one of them would be a JS heavy page. Will only submit to the server if data needs to be saved. Can I somehow create a website that has 10 SPA? Like I will load tab1, but not the other tabs until the user choses another tab.
I do not know whether I am making a sound decision about SPA or MPA here in this case where I have to build a portfolio website for an artist who wants to showcase art work. To the most part it is their artwork as pictures and description in texts which are visible to the visitors of the webpage. After seeing this explanation I believe it is MPA where I can use Django to build the webpage. But as an artist will there be an expectation for user experience? In that case then front end should be handled by dedicated JavaScript library like React or any other front end framework like Angular. I still do not know. I am just guessing. If someone can help me with this it will be adding value to my decision making process. Thanks for the video. It was a good learning experience.
Honestly, both options would work for you. A lot of people are doing statically generated sites for your use case which is a great way to go. Those be done as MPAs or SPAs depending on the framework
@@JamesQQuickHey. Thanks for the reply ❤.. But by statically generated sites did you mean like using Hugo or by using React with Next.js which supports SSG? I am new to this space and I am trying to learn full stack so....
![⭐ฮิตในTikTok!! ( มะมะมะหมูเด้ง MooDeng ) Ver. แดนซ์ ReMix BY [ ดีเจกิต รีมิกซ์ ]](http://i.ytimg.com/vi/4noyAoMa7bQ/mqdefault.jpg)
A key factor in the decision of whether to go single-page is whether it is a "site", or is it an "app". There is a difference. A site needs seo more than an app. An app can be supplemented with a multi-page site that features the app. Also, with spa permissions gateways can and should be done on the server side; session management enables this to be accomplished.
I was having trouble getting out of the initial hype I felt when learning about SPA and actually make an objective decision on what I would do for my web app. This helped alot thank you!
Fantastic explanation!!! As you mentioned it’s clearly the time when island architecture is coming very strong as a developer and user experience, and I have to talk again about fresh which is also amazing as Astro does for static site, but with the ability of the route folder structure of nextjs + the island architecture for dynamic renders or state. Really hard to find our way in this “war” between ssr or csr, with the explosion of react it was the new way to go but it has shown some limits and we go back to ssr with amazing new frameworks like also qwick which is doing a great job with its signals system. That’s all amazing and so interesting and good to have a clear explanation as yours that comforts my thoughts and understandings 👍👍👍
At the end you mentioned SEO as a reason to use MPA.
SSR and SSG in Next.js f.ex. using Server Components allows also to add SEO tags to the Html BEFORE it is sent to the user. This can be done for each route so that for home or any other route the meta tags are already included because the server already handled the rendering of the html.
Also authentication can be handled fully serverside.
One can simply read out the cookies from the request and check if the user is authenticated on tje server BEFORE sending/responding with the respective content.
So the benefits of MPAs can all be included in SPA architectures as well so there is almost NEVER really a good reason to use MPA over SPA.
Really liked this and appreciated the content. Easy to follow so thanks for that. 👌
But in the Spa for example in Vue, we have the Lazy Loading Routes where there is the concept of "Chunk", the js is splitted
I like to write an MPA in Django and then use Vue for building interactivity inside a page if needed. Nice thing about Django is you can write a combination of templates and REST endpoints for the same set of models. So if I want to have faster initial load I can populate initial data on the server side and then have Vue call the API whenever the data needs to be updated.
React does this too now with server components.
A very much needed intro. Resolved many confusions that I have.
Thank you very much for the video.
Great use of visual explanation. Make things very clear =D
Yay! So glad to hear that :)
just combine both of them i notice that with E commerce apps some pages is constantly needs fresh data from the server so i mixed both multi page and single page
what framework are you using?/
Very clear and great visualisation, thanks dude! 🎉
James. I usually do multi page applications. Using node and vue inside html without vue cli. It is fast and easy to update and add new features. what do you think?
Do you have a github repo ? I'm new to web dev and would love to see the work flow
Interested in the details if you'd care to share?
If that works for you, that's all that matters!
sometimes you can't choose... for example deploying things like "decentralized" frontends, where it does not exist a SSR concept, so SPAs will continue being improved, in things like SEO, performance, and usability, I think on the future both MPAs and SPAs will be on par but highly specialized in solving their challenges
Javascript is so fad driven they had to rename the old way for people to think its the new thing to do.
I tried to explain "JAMStack" to a React dev and he was very confused
It changes so quickly lol
Thanks for this👍
Glad you enjoyed it!
Very good video, well done!
Transitional Apps with SvelteKit best of all worlds.
Very helpful!!
I am favor of generating Static Web pages and then using JS for data islands or SPA like features that dynamically Morph a static into a Spa. So in the case if feedback from, the submission is posted without page reload and the main content area changes state without leaving page. What is key is to regenerate statics only when the important data changes. I am in favor of having the server generate statics instead of having to recompile and upload a website.
Great explanation. Thank you
Glad it was helpful!
when to choose one over the other? It depends. Thank you for this very useful video.
It always depends lol
This is why Rails is growing again. With Rails 7 and hotwire you have your multipage application that behaves like a single page application where it needs to with out all the extra BS.
If I need a website where there will be 10 tabs, each one of them would be a JS heavy page. Will only submit to the server if data needs to be saved.
Can I somehow create a website that has 10 SPA? Like I will load tab1, but not the other tabs until the user choses another tab.
What about things like Phoenix LiveView or Laravel Livewire?
What tool are you using for the illustrations?
that's excalidraw
Yep!
Can mpa be used with a micro-services on the backend ?
I do not know whether I am making a sound decision about SPA or MPA here in this case where I have to build a portfolio website for an artist who wants to showcase art work. To the most part it is their artwork as pictures and description in texts which are visible to the visitors of the webpage.
After seeing this explanation I believe it is MPA where I can use Django to build the webpage. But as an artist will there be an expectation for user experience? In that case then front end should be handled by dedicated JavaScript library like React or any other front end framework like Angular.
I still do not know. I am just guessing. If someone can help me with this it will be adding value to my decision making process. Thanks for the video. It was a good learning experience.
Honestly, both options would work for you. A lot of people are doing statically generated sites for your use case which is a great way to go. Those be done as MPAs or SPAs depending on the framework
@@JamesQQuickHey. Thanks for the reply ❤..
But by statically generated sites did you mean like using Hugo or by using React with Next.js which supports SSG?
I am new to this space and I am trying to learn full stack so....
Nice work
6:25
0:06 Are Creepy Dementia Joe style whispers into the microphone the new thing in TH-cam videos? Let’s all hope not!
We'll see :)
@@JamesQQuick James you gotta wear mask next time just to piss this guy out😂😂
@@recursion. lol.