If you’re building a new mobile website for your product, one of the first decisions that you’re likely to be faced with is whether you want to go with the traditional multi page site or select a single page app (SPA) instead. Of course, there is also the option of a hybrid approach – the simplest being to host one or more rich SPA-like sub-apps within a larger traditional web app.
Below, I wanted to talk you through the features and benefits of each option, as your decision should really depend on the nature of your product and what you’re hoping to achieve with it. I hope you will find the below points useful when making your decision.
First things first – what’s the difference between the two?
A single page app (SPA)
A traditional multi-page application (MPA)
As the name suggests, these applications use more than one page. In fact, every request triggered in the app renders a new page from the server in the browser. As a result of the increased amount of content, these applications are much larger than SPAs.
Of course, there are pros and cons of both applications, which we will delve into in more detail below.
When is it best to choose a Single Page Application (SPA)?
- When your app has many features and a complex User Interface (UI)
As previously mentioned, SPAs can support more complex client-side functionality that doesn’t require reloading the page as users take actions or trigger commands in different parts of the app. These types of apps are able to load content much more quickly sourcing data in the background. Individual actions are more responsive, due to the fact that it is rare that you would need a full page reload. Only data is transmitted back and forth.
SPAs can also save forms which have been only partially completed by the user, without them having to click a button to submit it.
- Your app must already support an API for other clients
If your app is already supporting a web API which is being used by other internal or external clients, you may well want to use the SPA format, because of the fact that it leverages these APIs instead of reproducing the logic in server-side form. SPAs make use of web APIs in order to query and update data as users interact with it.
Additional advantages of using an SPA:
- The ability to cache data: SPAs are able to cache local data by sending a single request to a web server and saving the resulting data. As the apps have ongoing access to this data, they let the users keep on working even if they’re lacking strong connection.
- Design responsiveness: Since a single page web app updates the desired content only, it dramatically improves the loading time. Furthermore, by loading just small chunks of content SPAs make the interactions prompter.
- Easier debugging: As all the code is on a single page, it’s easier to debug Single Page Applications. In addition, many SPAs are built on SPA frameworks which come with their own Chrome extension such as React Developer Tools.
When is it best to choose a traditional Multi Page Application (MPA)?
- Your application has much simpler user requirements
There are still many apps which run on mostly a read-only basis, including numerous content portals, blogs and news feeds. These types of apps are much simpler in their design than those which manipulate a huge amount of data and triggers. Most standard search engines fall into this category as they usually include only a single textbox followed by a page which displays the results. These applications are therefore much better suited to being built as traditional server-based web apps performing logic on the server and rendering HTML to be displayed in the browser.
- You’re looking to build your SEO
Additional advantages of using a traditional MPA:
Cost effectiveness: MPAs have been on the market pretty much from the advent of the web era. As a result of all the established technologies and developers working in the same domain, Multi-Page App development has become a cost-effective approach. In Multi-Page Applications, out of the box solutions are supported, but in SPAs additional coding is required, which is an additional cost.
Easy navigation for users: MPAs enable the use of the backwards and forwards functions in the browser. They also come with a sitemap, making navigation easier for users.
I hope that you’ve found the above summary useful. To conclude, when choosing between an SPA and an MPA, there are some key things to take into consideration:
- The purpose of your website – will it be content driven or interactive?
- What will the main elements of your site be?
- What benefits will your content deliver to users?
Remember that SPAs work great for SaaS products and social media portals, as well as some online stores, while MPAs are much more commonly used by businesses which offer a vast array of products and services, or different types of content. MPAs are also indexed much better by search engines, which is why they are a top choice for ecommerce sites and service providers.
Subscribe to our newsletter
Want to receive a fortnightly round up of the latest tech updates? Subscribe to our free newsletter. No spam, just insightful content covering design, development, AI and much more.