Single-page applications vs. multiple-page applications: pros, cons, pitfalls

17 October 2017

The world of software constantly keeps evolving. Just a couple of years ago desktops and laptops have been the primary devices all the web products were built for. It’s quite a bit different today, though. Web applications are gradually taking place of the old-fashioned desktop applications.

Why? Because they are universal for all the devices, they are cloud-based and generally more user-friendly. Some might say, browser-based web applications already start losing to mobile ones with many casual users.

But the truth is, web apps are absolutely alive and the demand for them keeps increasing. If you consider outsourcing web application development for your business, you are probably aware that there are two general ways web applications can be built: they can be designed as either multi-page applications (MPA) or single-page applications (SPA). And, like all the things in life, both design types have their own advantages and disadvantages.

Some important decisions need to be made before you begin implementing your ideas. To decide what app model suits your business best, you should always consider the content your customers appreciate, because without it presented properly you just won’t attract your clients to use the app.

Hence the essential questions are: what content you want to promote to your target audience and what your users are concerned about.

As we mentioned above, both SPA and MPA have their own advantages and disadvantages. Let’s try to clear the difference between the two types and try to find the right web development solution for your business.

To do that, we’ll invite our head of web, Vital Ozierski, to give his expert opinion on the matter. Hopefully, together we can make this choice easier.

Single-Page Applications

A single-page application is an app working inside a browser and not requiring page reloading during use. These applications are used by millions of users every day without even noticing it. The biggest examples are GitHub, Gmail, Google Maps, and even Facebook.

Vital Ozierski: Single-page applications, as a rule, are very interactive. So interactive, in fact, those users have a full-scale experience of working with a desktop app: the application’s reaction on user actions is incredibly fast in most cases. This is the main advantage of SPAs over multi-page sites, where every action is taken causes waiting for a new page to load.

Single-page applications are customized to provide great UX resembling a “natural” browser environment — without any page reloads, e.g. no time lag for interactions. It basically looks like a single web page that loads the rest of the content with the help of JavaScript.

SPA requests webpage markup and data independently and renders pages directly in the browser. This is achieved thanks to advanced JavaScript frameworks like AngularJS, Ember.js, Meteor.js, Knockout.js.

VO: Apart from the most popular frameworks, OZiTAG developers are also able to develop single-page applications using ReactJS.
The biggest advantage of React is accessibility. React is pretty easy to use. Basically, any developer familiar with HTML can create React applications.
Another advantage is the opportunity to create web and mobile applications using the same technology stack. We use React with Redux library, which lets us establish a good foundation and create complex, but scalable web applications.

The UX advantage of single-page sites specifically on the user’s side is that all the content is presented in a functional, accessible way without the need to jump around multiple loading pages.

Advantages of Single-Page Applications:

SPAs are quick, as the majority of resources they use (HTML+CSS+Scripts) are only loaded once throughout the usage session of the application. The only thing transferred and changed after user actions is data.
The development of web applications is usually quicker and more efficient. There’s no need to write custom code for server page rendering. Also, it’s much easier to get the development going, because you can start coding from a file file://URI, without using any server at all.
SPAs are optimised for Chrome debugging, as the developers can monitor network operations, investigate page elements and data associated with it.
Existing SPA makes it easier to create a mobile application based on it, because the developers can (and probably will) reuse the same backend code.
SPAs are more efficient in caching any local storage. An application sends just a single reflex, collects the necessary data, and is able to function even offline at that point.

Disadvantages of Single-Page Applications:

The SEO optimization of a Single-Page application is not that easy for obvious reasons. The content is loaded by AJAX (Asynchronous JavaScript and XML) — a method of exchanging data and updating it in the application without refreshing the page, while SEO relies heavily on stable content within separated pages.It’s not impossible to promote your site in search engines, though. Many SEO changes can be done on the server side as well, and companies like Google keep coming up with various solutions to make the life of SPA owners and users easier.
It is slow to download because heavy client frameworks are required to be loaded to the client.
SPAs require JavaScript in its active mode in users’ browsers. If any of your customers manually disables the use of JavaScript, they won’t be reached by your app in the right way. Even if you’re rendering and caching your pages on the server side (which is also possible now), you’re still at risk of not delivering all the app’s functions to users without JS in a correct way.
Compared to the conventional applications, SPA is a bit less secure. Due to Cross-Site Scripting (XSS), it enables attackers to inject client-side scripts into web application by other users.
Some memory leaks in JavaScript can lead to productivity drop for even powerful systems

You also need to know, that all the issues associated with the use of single-page applications are getting gradually resolved, because many businesses and tech giants are encouraging this form of customer interaction nowadays.

VO: SPA is suitable for any business, that needs its processes automated. As far as corporate websites and catalogs are concerned, it’s better to use traditional websites.

Multi-Page Applications

Multiple-page applications function in a more traditional way, so to speak. Every major data change or submitting data back to server leads to rendering a new page in the browser.

Multi-page apps are obviously larger than single-page ones, and usually, aim at displaying more content. The complexity and costs of MPA development are higher, they also require multiple levels of UI to design.

Fortunately, it’s not too big of a problem anymore, because AJAX solution makes it possible to refresh just certain parts of the application, not the whole thing with tons of data between servers and browsers.

Advantages of multiple-page applications:

It’s the most suitable option for users who need better visual clues for navigation around the app. MPAs are usually made with familiar multi-level menus and other navigation tools.
Much easier SEO. Allows you to optimize each separate app page for a specific keyword.

Disadvantages of multiple-page applications:

Frontend and backend development are very closely connected here.
The development of MPAs is quite complicated, as it requires the use of frameworks both on client and server sides. The terms and costs of development are, accordingly, not that pleasant for many businesses.

SPA or MPA?

Before deciding to order the development of web application, you need to take the goal of it into consideration. If you’re dealing with a variety of goods and services, a multi-page site is a way to go for you.

If you look for maximum functionality within confined web space, a single-page application would be the right choice. And if you like the functions of SPA but can’t imagine how to fit all the content in it, consider the hybrid site instead.

This is the form of web development we haven’t mentioned yet. A hybrid application is aimed to take the best of the two worlds and minimize the disadvantages. technically it’s still an SPA, but it uses URL anchors as synthetic pages enabling more inbuilt browser navigation and preference functionality.

Reach out to us, if you’d like to hear more about hybrid apps, we’ll write a custom text about them.

There’s a popular opinion, that in a not so distant future everyone will use Single Page Application model (including a hybrid app), as it seems to bring more advantages both from the development and user experience perspectives.

According to the data we have, many businesses are now switching to this model in their services. However, some projects simply cannot be implemented as SPAs – they just have too much content. Hence, at least for the near future, the MPA model is still vivid.

VO: I completely agree with the statement about the growing popularity of single-page applications. SPAs are in great demand at the moment because businesses tend to convert their old desktop applications to any-browser apps with improved functions.

We provide quality enterprise web development services, helping companies achieve their business goals. If you have questions about web projects or want to start your own, contact us and get a consultation for free!