How to choose between single and multiple page apps

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)

This is an app which works within a browser and doesn’t require page reloading during use. Examples include the well-known social media apps of Facebook and Instagram, as well as GitHub and GoogleMaps. SPAs deliver a top user experience without page reloads or extra waiting time. It’s one web page with all other content loaded using JavaScript.

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 developers use JavaScript or TypeScript

Creating SPAs requires in-depth knowledge of JavaScript and TypeScript, as well as client-side programming techniques and libraries. Modern JavaScript Frameworks include React and Angular.

• 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.

• Your developers are not experienced in JavaScript or TypesScript

If your developers are not experienced in JavaScript or TypeScript, but they are familiar with server-side web app development- it’s likely that they will be able to produce a traditional web app more quickly than a SPA. For this reason alone, you may want to go down this route when building your digital product – unless of course your app has so many features, that it’s worth upskilling your team in building SPAs, or outsourcing the project to another team.

• Your application needs to function in browsers without JavaScript support

If you want your web app to work in browsers with limited or no JavaScript support, then you should definitely focus on using traditional web app workflows. Remember that SPAs run on the basis of client-side JavaScript and if this is unavailable, they may not be a good choice.

• You’re looking to build your SEO

An additional benefit of traditional web apps is that each page has its own url which can be indexed by search engines for SEO purposes. But if you’re considering an SPA and are concerned about SEO, you also have the available benefit of server side rendering. This is a popular technique for rendering a normally client-side only SPA on the server and then sending a fully rendered page to the client. The client’s JavaScript bundle can then take over and the SPA can operate as normal.

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.

To conclude

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.