Single or Multi-Page Web Apps: What to Choose for Web Development

Single-page applications, or simply SPAs, have created a lot of buzz around the internet. Developers have gone into battles of words comparing SPAs with the traditional multiple-page approach. This dispute has turned into a struggle akin to iOS vs Android.

We’ve decided to also add fuel to the fire and investigate this topic. Our aim is to find out why more and more companies prefer a single-page approach and to consider cases when it’s best to build a single-page app.

Single-page apps versus multi-page apps

A single-page application is a web application that fits on one HTML page. This page can be dynamically updated, but it never reloads the whole time a user is interacting with it. Using a SPA, you can manage most interactions on one web page for dynamic updates.

Where can you see single page web apps? You deal with them every day when checking your email on Gmail, scrolling your news feed on Facebook, adding a new task in Trello, or watching shows on Netflix.

[Image source: Trello Blog]

Do you remember the last time you used a Google Doc? Yes, Google Docs are SPAs too. When you click on any element of a Google Doc, type something, or perform any other action, the main interface remains untouched. Nothing but the chunk of content you want to alter is modified. This is the main idea of a single-page app.

Most promotional websites and landing pages are also just a single page. CashNotify is a good example of a landing page built on a SPA framework. This website promotes the CashNotify app (a macOS taskbar app for Stripe payments) and lets users buy the app:

In turn, a multi-page app, or MPA, is a traditional approach to creating web apps, where a page reloads each time the content is updated. The AJAX technology made it possible to load small chops of data without reloading, but implementing this technology takes considerable time and effort.

Typically, these apps have complex architecture, the pages consist of static content and links to other pages, and hence navigating the app can be difficult. Large-scale web apps, like Amazon and eBay, are built using the multi-page approach.

Advantages of single-page apps

Single-page applications try to solve the problem of poor performance and increase conversion rates. They can drastically save on hardware costs and much more. Let’s investigate all the benefits SPAs can bring.

Speed and responsiveness

With single-page apps, a server doesn’t need to reload most resources such as HTML, CSS, and scripts with every interaction. These files require only initial loading. After that, only new data is downloaded from the server.

Additionally, SPAs reload only pieces of content, so they have a lighter server payload. This is why such apps allow fast interactions in an app. SPAs also reduce response times thanks to moving data processing from the server to the browser.

Also, a SPA requires less time to develop. First, there are a plethora of JavaScript frameworks that facilitate development. React, Angular, and Vue are the most popular. Second, backend and frontend development can be separated and hence developed in parallel.

Adaptability

A SPA brings you considerable relief when developing a mobile application: you can reuse the same backend code from a web-based app for the mobile application. That’s quite hard to do with a multi-page application. Additionally, SPAs look and feel more like an application than a website, so you don’t need to specifically adopt a SPA’s design or functionality for mobile devices.

Flexible UI

You can totally rewrite the frontend of a single-page application with no influence on the server except for some static resource files.

Offline support and caching

Single-page applications can cache to any local storage with dispatch. This type of apps sends one request to a server and then stores all the data it receives. The application can use this data. This is why a SPA can operate even offline, unlike an MPA, so you can keep using it even if your device loses connectivity. Whenever the connection comes back, the local data will synchronize with the server.

Ability to separate data and UI

Single-page apps are able to distinguish between data and the user interface. This can considerably help to streamline testing when developing a web app. Moreover, such a distinction allows you to handle all future integrations and possible changes in how data enters the SPA framework and goes to other systems without massive implications for the interface.

Debugging with Chrome

Of course, you can debug multiple-page applications with Chrome, but with the single-page approach, it’s much easier. There are several reasons for this. First, you can see all the code at once, as it’s located on one page. Second, these apps are developed on frameworks that have their own Chrome developer tools such as React developer tools, AngularJS Batarang, and Vue.js dev tools.

SPA drawbacks — but not ones you can’t beat

Every new model has its drawbacks, and single-page applications are no exception. There are areas in which they lose to multiple-page applications.

Lack of SEO-friendliness

Why don’t SPAs get on with SEO? Definitely, a SPA has a far smaller semantic kernel than an MPA. SPA uses JavaScript to load content dynamically, so when a search engine bot, or web crawler, visits the page to index it in the search engine, it sees the empty page without content. Google regularly introduces new ways to parse and index single-page apps, but there are still some issues regarding SEO.

Memory leaks

A memory leak is the loss of available computer memory. In SPAs, memory leaks can happen due to event listeners. Listeners, also known as event handlers, receive event notifications from an event source. By event, we mean any action recognized by the software, such as a keystroke or a mouse click.

Sometimes events can be unbound incorrectly. How does that happen? An HTML element can be bound to an event. But if you modify the HTML content, the event handler stays in memory though you can no longer execute it. The browser doesn’t remove this event handler, so you need to do it on your own with the help of RequireJS, module loading, or by closing all events properly.

Security concerns

Some people underline the insecurity of SPAs due to cross-site scripting (XSS). With XSS, attackers can exploit the vulnerability of a web page and insert their own client-side code. This lets attackers deliver a malicious script to a victim’s browser.

But actually, you can handle this problem as well. With MPAs, you need to secure separate pages. In the case of single-page apps, you just need to secure your data endpoints. If you don’t want your client to have access to all of your code, you should divide the downloadable JavaScript into several separate parts.

Lack of scalability

We can barely call single-page applications scalable. With the traditional approach, you can create new content and split it across new pages. But with a single-page app, it’s much harder to add more to your site. If you put too many features on one page, it’ll cause a longer loading time. Facing this problem, some companies have to fully redesign their websites.

Single sharing link

Using the single-page approach, you only have a single URL (i.e. there’s only one link to share on social networks). This makes it impossible to share a specific piece of content.

Back and forward browser buttons don’t work

Back and forward browser buttons don’t work with single-page applications. Whenever visitors click the back button, the browser will actually transfer them to the previous page that the browser loaded but not to the prior state in your application. You can handle this problem with a History API. The good news is that many modern SPA frameworks are fitted with this API.

Accessibility concerns

Some users can turn off JavaScript in their browser, so when visiting a single-page app, they see only an empty page.

Multi-page apps: pros and cons

The strong sides of multi-page applications include:

• Search engine optimization. MPAs are much more SEO-friendly than SPAs. This gives a better chance for an MPA to be ranked high.
• Navigation. Users can easily navigate through an MPA, via browser navigation elements. But bear in mind, that if you build an app with complex architecture, ensure that you’ve created a simple and intuitive navigation block.
• Scalability. You can create as many pages as you want, linking them with each other.
• Tech stack. Even though the development process may be more complex, compared with SPA development, MPA in most cases requires a smaller tech stack for front-end web development.

But there are some pitfalls of creating MPA as well:

1. Backend and frontend are almost nonseparable, which makes it more difficult and longer to develop, test, and update an MPA.
2. A web app completely reloads HTML, CSS, and scripts while updating content or loading another page. This greatly affects app speed and performance.

Wrapping things up

When choosing between a SPA and an MPA, consider the following:

• What your website will do
• How much information you’re going to post for your users and what type of information it will be (Does it involve interactive content?)
• What your site will look like and what the main elements will be
• What benefits your content will offer to users

Single-page applications work perfectly for SaaS products and social networks. Multi-page apps are often developed by companies that offer a wide range of products and different types of content. Since MPA are indexed better by search engines, they are frequently used for online stores, catalogs, and marketplaces.

On the other hand, a single-page application can be a magic wand if you want to considerably cut hardware costs or if you need offline processing — to throw a life jacket to your visitors during server outages, for instance.

We’ve provided you with a detailed list of pros and cons for SPAs and considering use cases for each approach. If you still decide between these approaches, just drop us a line and we will help you.