With the wide adoption of JavaScript frameworks like Angular or React, single page application (SPAs) are becoming more and more popular. They are often the default choice when starting a new project. Despite their qualities, advantages and adoption by large companies such as YouTube, Facebook or Twitter, “traditional” multi page applications (MPAs) can be more relevant in some use cases that I will try to cover in this article.
Single Page Application
Single Page Application (SPA) is a more modern type of web application / website development approach that serve a single HTML page as a container and enable you to work in the browser. The page is never fully refreshed upon navigation, instead, only parts of the application are updated dynamically.
Famous SPA examples are Facebook, Google Map or Gmail. There is no page reload, thanks to AJAX requests, only the relevant parts are dynamically updated.
| Pros | Cons |
|---|---|
| Decoupled front-end | SEO |
| Offline opportunities | Security more complex |
| Speed | Slower initial load |
| Debugging | Require JavaScript |
Pros
Decoupled front-end
Front-end and back-end are separated, a dedicated team of frontend developers can focus on the application and interface. The SPA will consume the API provided by the backend team.
Offline opportunities
As SPAs work on the browser, they can make advantages of the local storage to cache server data response and therefore still be able to work in case the user loses his internet connection.
Speed
Once the page is loaded, only part of it is refreshed by data loaded upon user requests. This, and a proper usage of loading indicators and “pre-display” of the layout contribute to the feeling of speed and greatly improve the overall user experience. This is critical to retain users on your website.
Debugging
Thanks to browser improvements and available developer tools, it is easier to debug SPAs. You can make use of the developer console or the network tab to monitor the request made by your application.
Cons
SEO
Search Engine Optimization is really challenging with SPAs. Because the page is built progressively, the content and meta tags are not available directly on page load. This is true that crawlers like Googlebots have improved over the year and can now parse JavaScript, that could become more complex as, most likely, your data will come from the server though multiple AJAX requests.
More complex Security
SPA can add complexity to security compared to a traditional website. You have to secure the communication between the front end application and the API, it is also not less secure to store data inside the front end.
SPA are also vulnerable to Cross-Site Scripting (XSS) attack. Fortunately, most modern framework like Angular contain built in solution to prevent it.
Slower initial load
If you only consider the “time to first byte”, yes the SPA will render content quicker than a MPA, because the index.html will be served very fast. However, you will have to wait that the browser executes the JavaScript to bootstrap the application. You can also add up the time to execute the first AJAX request if you need to display data from your API. In case of MPA, the content is generated server side and served at once, which make the initial load faster.
Require JavaScript
If JavaScript is disabled in the browser, the application won’t work. I’m not sure there is a lot of users with JavaScript disabled in 2022, but just to keep in mind.
You should also pay attention to memory leaks. (Don’t forget to unsubscribe from your Observables 😃 )
Multi Page Application
Multi Page Applications (MPA) are the “traditional” websites, where all the pages are server side rendered and every change trigger a full page reload.
Some MPAs examples are the site of the BBC or the giant of the e-commerce; Amazon. You can see that upon each navigation, the page is fully reloaded.
| Pros | Cons |
|---|---|
| SEO | Lower speed |
| Scalability | Mobile adaptability |
| UI / Data separation | |
| Development time |
Pros
SEO
Compared to the SPAs, there is no issue with Search Engine Optimization. Every new pages are server side generated and served completed with the finished content. The crawlers see the same render as the end users and can easily parse the page.
Scalability
MPAs can scale better than the SPAs, functionalities are spread over multiple pages and pages can be updated individually without impacting the others. A lot of features can be added without impacting the performances, whereas in a SPA, the more feature you add, the bigger the final bundle will be; especially if you don’t have a proper lazy loading strategy.
Cons
Lower speed
Because the app is refreshed on every navigation / request, the speed is impacted. The browser need to reload all the resources every time the user request a new page. Every delay from the server response is more noticeable than in a SPA, leading to a poorer user experience.
UI / Data separation
In MPAs, front-end and back-end are more interdependent. Changing the UI can be more complex than in a SPA and usually all the base code are under the same monolithic project.
Development time
A direct consequence of the point above is that, strongly coupled front-end / back-end, requires more time to develop.
MPA are usually more “complex” and larger than SPAs.
Conclusion
Deciding to develop a Single Page Application or a Multi Page Application depends of the type of product you want to deploy.
If SEO is vital or if you want to deploy a large website such as an online shop / marketplace, go for a MPA. That is also true for websites with lots of content such a news / editorial website.
If you want to develop a web application, such as an email client or a booking system, then SPA are the better choice.
This is not covered in this article, but some of the issues of SPA can be resolved (or reduced) by putting in place a server side rendering or pre-rendering strategy.