Single Page Applications

There are two principal ways of building a website: as multi-page applications (MPAs) or single-page applications (SPAs). Over the past couple of years, I’ve seen a clear increase in the number of SPAs compared to MPAs, as SPAs are considered more contemporary. Some of the most popular sites and platforms such as LinkedIn, Facebook, Gmail, and Trello are all single-page applications, and a growing number of businesses are building them for themselves. But what are they and why are they popular?

Here’s a brief overview of what an MPA is and the pros and cons, before diving deeper into SPAs, the pros and cons, and when to use them.

What is a Multi-Page Application (MPA)?

Multi-page applications (MPAs) are the traditional web applications that reload an entire page and display a new page when a user interacts with the web application or website. Every time data is exchanged, a new page is requested from the server to display in the web browser. Most eCommerce sites, such as Amazon or eLearning websites such as Udemy are examples of MPAs.

Benefits of Multi-Page Applications (MPAs)

• Improved SEO: MPAs are more SEO-friendly because they have multiple pages to add keywords, images, and metadata.
• Easier to scale: there are almost no restrictions on the number of pages you can add to an existing application, something that isn’t the case for SPAs.
• Insightful Data Analytics: You can get more in-depth data around customer behaviour, system functioning, single feature performance, web page popularity, audience segmentation, and more. SPAs generally only provide information on the number of visitors and their session duration.

Disadvantages of Multi-Page Applications (MPAs)

• More complex to build and often more expensive due to the development time, resources required, and the effort needed.
• Content in MPAs is constantly reloaded which increases the load on your servers and can sometimes affect the speed of your web pages loading.
• Expensive to maintain: tools become outdated quickly and it can be expensive to continuously keep the system up to date.

What is a Single-Page Application (SPA)?

A single-page application works within the browser and is a type of web application which is all loaded from one page, and all user interaction with that service is carried out using that one page. As soon as a user interacts with the app, only the required component will be modified, not the complete application. This makes a single-page app much faster in terms of interactivity. SPAs require no page reloads and no extra time for waiting, as content is all downloaded automatically.

How Do Single-Page Applications Work?

Single Page Applications allow users to interact with the web page whilst new elements are loaded or updated. When an SPA is launched, dynamic rewriting using JavaScript allows the user doesn’t need to reload the page. SPAs fetch content dynamically from the server using web sockets for AJAX requests which means that the browser can continue running the current page, whilst it makes background requests to fetch new content or pages — this is a whole other topic… The user will automatically see all the main content of the page, and when they scroll (or similar), new elements are loaded when required, rather than needing a full application to reload.

Without having to reload the page, you can still create individual URLs for different sections for tracking views and interactions by altering the page’s URL using the HTML5 History API.

Advantages of Single-Page Applications (SPAs)

• Performance — loads HTML, CSS, and JavaScript resources as soon as the website is loaded
• Shortest possible wait time — quick load time and time to interact
• Improved User Experience (UX) through a more understandable linear experience. Having a single page allows more flexibility and responsiveness, too.
• Easy debugging: An SPA is most often developed based on popular frameworks (React, Vue.js, AngularJS) that offer their own debugging tools based on Google Chrome.
• Less complex implementation and faster development speed. You will have to develop and test fewer app elements and will be able to reuse parts of the code.
• Better caching: after the first request to the server, all necessary local data is stored in the cache, allowing the user to work in an offline mode (e.g. Google Docs offline mode)

Disadvantages of Single-Page Applications (SPAs)

• Difficult to optimise SEO: individual page applications seem to work on JavaScript, based on the request coming from the client-side, it downloads data. Most of the time, different screens don’t come with unique URL addresses and the URL does not change much. This means pages cannot be found and scanned by search bots, meaning it is difficult to optimise SEO. In order to increase the SEO optimization of single-page apps, Google has recently launched a new scheme — dynamic pages are indexed by Google. However, for this to happen, it is essential for the developers to be sure that Google indexes all the JavaScript files. The developers also need to confirm that in the URL scheme, the website makes use of the HTML5 mode.
• Security Concerns: single-page apps are more vulnerable to attacks from cross-site scripting. It is possible for hackers to inject client-side scripts into web applications by making use of XSS.
• The download time can actually be slower if the platform is large, complex, or poorly optimised.

When Should I Use an SPA?

As mentioned above, there are two general approaches to building web applications: multi-page applications (MPAs) that perform most of the application logic on the server, and single-page applications (SPAs) that perform most of the user interface logic in a web browser, communicating with the webserver primarily using web APIs. The preferred approach to building web applications will differ from business to business, depending on a number of factors.

Microsoft suggests that you should use an SPA when:

• Your application must expose a rich user interface with many features.
• Your team is familiar with JavaScript, TypeScript, or Blazor WebAssembly development.
• Your application must already expose an API for other (internal or public) clients.
• You have the architectural and security expertise required for SPA frameworks.

Additionally, if you are looking to provide real-time updates on your application, an SPA approach is a perfect fit as it effectively enables data streaming, notifications, and real-time charts and updates. Furthermore, SPAs are perfect for dynamic platforms with small data volumes and ideal for mobile app development. SPAs are particularly beneficial to SaaS platforms, social networks and closed communities where SEO isn’t important due to the challenges SPAs face with search engine optimisation.

When to Avoid Using an SPA

If you have a platform or website that contains purely static content you can actually slow down the load time of the application because it requires the users to first download the JavaScript payload and execute it before being able to see any of the content. It’s better to use a multi-page application (MPA) if you’re a larger business with a broad range of products or services that require differentiation, lots of features, and multiple menus. This includes online stores, catalogues, marketplaces, and most business sites.

Single-Page Application or Multi-Page Application

Each architecture model has its own pros and cons, each suited to certain types of projects, companies, and business goals. There is no definitive answer on which is better. Everything depends on the specific project or business requirements, and the decision needs to be based on those needs and technical requirements.

If your business has a wide range of products and services to display on the website, and SEO is an important method of customer attraction, a multi-page application is more suitable. On the other hand, if you want to provide maximum functionality, in a limited webspace, and you want it to be more dynamic and flexible, a single-page application is probably more suitable.

I’m keen to hear from my network on what approach they have adopted and why. Drop a comment below to share your experiences with MPAs and SPAs.

Regardless of whether you build an SPA or an MPA for your business, you need top developers ‘to ensure your web application is functional and fit for purpose, to deliver quality information and services to your users. If you’re ready to build or scale your Frontend Development team, get in touch today for confidential advice and support on attracting, hiring, and onboarding the top tech talent.