Single Page Vs Multi Page Applications
One thing which is sometimes perceived in an incorrect way is that SPA(Singl Page Applications) would use JavaScripts and MPA(Multi-Page Applications) would not! That is incorrect.
The interesting thing about MPA is that if you would open the developer tools and go to the Network tab, indeed every new page we fetch is downloaded from the server.
Every request resent to the server, so whenever we type a new url or click on a link, that leads to a new page being sent back from the server, now that could be a pure HTML page and a couple of assets used in the page like css and JavaScript and that would still be a Multi-Page Application and then we get different HTML pages for different Urls we enter Or the server is using some server side languages like Php or node and renders this Html page on the server again.
The Core takeaway is that we always gets a new file for every request and that is MPA.
Example — The whole NY Times website ( www.nytimes.com) consists of multiple pages which we download when we visit different parts of the page.
Whereas, In SPA we only get 1 page from the server, there will never be a second page. No matter where we click! Instead this one page also downloads a bunch of assets, css, images but typically also a lot of JavaScript because its then this JavaScript code which will listen to url changes to clicks or links and will then re-render the parts of the DOM in the loaded page whenever we switch the page by click on the link, we just change parts of the page, so typically though we use frameworks like Angular, React, Vue to do that.
Note: Vue and React can also be used on the different pages of a MPA! You would add widgets or enhanace parts of the pages with them.
Singe Page Applications
Advantages :
Super Fast — Whenever we click somewhere things happen instantly thats like the feeling we know from Mobile world, Desktops apps, there also when we click somewhere things happen super fast because even if we need to load the data from the server again and that’s certainely also the case of SPA, if we need to fetch some user or article data, that happens behind the scenes so the application or website stills reaches out the server more than once that is not the thing but it will never get the new html file back, it will only get some typically JSON data which JavaScript again can handle to parse it and render something on the page. So that is how it works. And therefore for the user it always feels like the page is instantly changed even we need to wait for the data then we present some nice spinner ( The Waiting Experience ).
Highly Reactive — Feels like Desktop and mobile worlds and its really really fast.
Decoupled Frontend — So For SPA you dont need to write a server side code. The backend team will create an API, to which you reach out from your SPA from you frontend.
Disadvantages:
SEO Challenging — There are tools, but right now it still is quite complicated and challenging, because crawlers like google bots can ask JavaScript and can understand your page if you render it with JS, but then we have a big problem if you are loading a page asynchronously, as crawler won’t understand your asynchronous behaviours.
JavaScript Strictly Required — SPA can’t run without JavaScript. If its turned off your page wont work at all.
Tends to favor modern browser
Multi-Page Applications
Advantages:
SEO is simple
Loads of existing frameworks, solutions and best practices
Disadvantages:
Slower, constantly needs to load pages
(More)Tightly coupled frontend and backend
Tends to support more legacy browsers
