Single-page application: how SPA works and how it differs from MPA

Single-page application (SPA) is an application that suits our times: fast, "light", user-friendly and ensuring a high level of user experience. We explain how SPA differs from multi-page application (MPA), what are its strengths and where it works best.

Today's Internet is driven by UX. Everything must be fast, smooth, aesthetic and accessible, so that the user feels satisfied and does not want to switch to a competitive website or tool, e.g. a web application. High-quality usability can be ensured in many ways. One of them is called a single-page application (SPA).

SPA vs MPA – what is the difference between these applications?

In times gone by, but still not so distant, one default solution prevailed in the web applications and websites market: multi-page application (MPA). In this model, as the name suggests, applications and websites are based on multiple pages and multiple HTML files. Dynamic HTML content is generated by the backend, and each transition between pages involves sending a request for a new page and downloading the HTML file from the server. This causes delays in loading and displaying the content, especially as data transfer does not always go smoothly. As a result, the waiting time for the system to react is sometimes too long for today's standards.

In the case of SPA, things are different: simpler, faster and more user-friendly. A one-page application uses only one HTML file and does not load pages while it is being used. All of its content can be loaded at one time after communication with the server has been established. As a result, data and content can be generated on the frontend side, i.e. by a browser, without further "deliveries" from the backend. This way, after clicking on a subpage, the content is displayed immediately, without waiting for the server response.

This mechanism makes a single-page application provide a much better user experience than a multi-page application. SPA reactions are instant and without "stitches" in the form of visible transitions between one screen and another or application status. In this respect, a single-page application resembles a computer application (installed on the device and able to operate offline) which, with the appropriate parameters of the device, is not running slowly and responds to the user's commands with great ease.

Where did SPA come from? Brief history of single-page application

The concept behind single-page application is not new. The technology similar to the modern version of SPA was described in a patent from 2002. However, its implementation was facilitated by the AJAX mechanism which has been operating as a network standard since 2006. It is a set of techniques for building web systems using a number of client-side technologies to create asynchronous applications. Thanks to AJAX, the program can send and receive data from the server in the background, without affecting the current state of the page and the content display mode, thus, without disturbing the user experience.

However, the emergence of AJAX was not a key breakthrough moment in the spread of SPA. Popularization of single-page applications is an effect of a wider phenomenon related to the rapid development of the frontend and the increased importance of UX in recent years. The first single-page applications were developed as Java applets or Flash applications as well as with the "pure" JavaScript or jQuery library. However, their creation was significantly facilitated by such systems as Angular, React.js or Vue – relatively young JavaScript frameworks used to create the frontend.

The advantages of single-page application have made it the preferred solution in many cases today. It works well primarily in projects of various web tools where speed and attractive UX are crucial with content being less important. There are many examples of single-page applications in practice. The most popular applications of this type include Facebook, Gmail, Google Maps, Netflix or Paypal.

SPA, MPA or hybrid? What applications are the individual applications suitable for?

This does not mean that SPA is definitely a better solution. MPA applications are still widespread and in many cases unavoidable. For example, information portals use the MPA model, where bookmarks such as "News", "Business", "Sport" lead to separate pages. After all, these types of websites are usually not a simple cluster of websites. They usually rely on technologies that are "substitute" or full-size web applications, for example, for streaming, shopping or various forms of interaction.

It is also common to combine MPA and SPA technologies. This approach is characteristic for e-commerce websites because it allows indexing individual product pages in search results. This type of hybrid solution is also used by service websites. This is the case, for example, with Booking.com, where the multi-page approach of the MPA model is crucial.

Each of the accommodation facilities available on Booking.com has its own subpage. As a result, it can be indexed in Google results as a standalone location with its own URL. After clicking on the appropriate link from the SERP level, we get to the page assigned to a particular hotel or hostel on Booking.com where we can make a reservation. However, these types of subpages work in the SPA model because the reservation is made through an application running within one page. A multi-page platform (MPA) can therefore contain pages "hiding" single-page applications.

Here it is worth clarifying an issue that is often questionable. Single-page applications can be confused with one-page websites which usually have little to do with applications. One-page is simply a page without subpages where the transition to the next category of content is made by scrolling down or clicking on a link moving the user to another level of the page. One-page sites are best suited as online business cards or company websites for small and medium enterprises.

Can I create links to subpages in SPA?

A separate, important issue related to SPA is linking. The very term single-page application suggests that such "structures" use a single URL. This may or may not be the case. SPAs are often tools that do not require the creation of extensive multi-page websites and can be placed, together with the necessary content, under a single locator (URL). However, there is a possibility to create virtual subpages with corresponding URLs, although the mechanism works a bit differently than with MPA.

Basically, two solutions are available: with and without a hash (#) tag. In the first case, the locator contains a # character, which separates the "basic" URL from the tag (e.g. a word that defines a content category) indicating a section of the application. These identifiers are not sent to the server as an HTTP request, but only indicate to the browser what resources to display. A URL with a hash is a solution that is becoming a thing of the past. It is used less and less often because it does not support SPA positioning and may seem unintuitive or even "suspicious" to some users.

The second solution is based on using HTML History API. It is SEO and user-friendly, but a bit more difficult to implement, as it requires proper server configuration. Moreover, in case of wrongly defined URL paths, it can result in reloading the whole page. However, the implementation of this type of linking is facilitated by routing modules which are now built into most SPA frameworks.

Regardless of the choice of method, in the case of a more extensive SPA, it is worth creating URLs to subpages or views for specific sections of content. They make the website easier to navigate, improve its readability and user friendliness.

SPA and SEO. How to position single-page applications?

Despite many advantages, SPA has its Achilles heel. This is optimization for search engines. Javascript applications generated on the client side (by the browser) have poor SEO support compared to pages generated in the backend (MPA). For a long time Google robots ignored content provided by JavaScript. The situation has improved, so much so that Google promotes the SPA solution in its recommendations, but one-page applications still have it tough in SERP.

This does not mean that the creators of SPA are at a disadvantage. They are supported by solutions like Next.js. It is a minimalistic React framework that allows creating one-page applications supporting the so-called server side rendering (SSR), in other words: providing the generated HTML code of a given page. Thanks to this solution, the page becomes readable for Google robots, which enables positioning of the whole website. Of course, in this case we are not dealing with a pure SPA, but a hybrid of a one-page application with MPA-characteristic rendering in the backend.

The issue of SPA positioning is obviously more complex. It is also difficult to separate it from the purpose of the application and the way it is promoted. Traditionally, web applications had business applications and Google did not put emphasis on indexing this type of pages, focusing on websites providing content. Currently, the situation is changing as web applications are increasing in popularity and competition in this area is growing, that is why the struggle for a higher position in search results is getting tougher.

SPA applications – what are the advantages and disadvantages?

Advantages and disadvantages of SPA depend to a large extent on the purpose of the application. Details of specific solutions – single-page application, multi-page application or hybrid – are best discussed with an experienced software house as the right choice can be determined by nuances.

The advantages of single-page application include:

1. SPAs are faster than MPAs
Although loading the application takes longer than in the case of MPA, because it involves sending all files from the server "at the start", navigation through a single-page application is faster than with a multi-page and causes smaller load on the server and the client’s device. MPA applications require sending files from the server every time the page is reloaded.


2. SPA provides a better user experience
   The speed and smoothness of SPA translates into a more attractive user experience than with MPA. This is a strong argument in favor of single-page application because UX is of great importance nowadays.
   
   
3. SPA is easier to debug
   Instead of breaking through the thousands of code lines on the server side, developers can debug SPA by examining the JavaScript code rendered in the browser. In addition, many JavaScript frameworks used to create SPA have built-in debugging tools.
   
   
4. SPA can be more easily converted to other types of applications
   A large part of the SPA code can be used to create a mobile application based on a single-page application. With SPA as a base it is also easier to create a progressive web app (PWA).

As regards the drawbacks of SPA applications, the following disadvantages are most often indicated:

1. SPAs are more difficult to position
   If you care about high position in Google's search results or you are developing a system where content plays an important role, a better option will be MPA or a hybrid solution combining a multi-page variant and a single-page application.
   
   
2. SPAs load slower "at the start"
   This can be a nuisance if the network connection is weak. On the other hand, after sending files from the server SPA works much faster than MPA.
   
   
3. SPAs may be incompatible with older browsers
   This is a result of the abundant use of JavaScript frameworks and new APIs when developing them.
   
   
4. SPAs are more challenging in terms of analytics
   Analytical tools work better with pages rendered in the backend. Ensuring better insight into website traffic and activities may require additional development work.

What application should I choose for my business?

Basically, the SPA model is recommended for business or consumer applications that require multiple interactions with the user where the dynamics and smoothness of their operation is crucial. MPA models will work well for news services, while hybrid ones for e-commerce and other Internet tools which include many sites requiring indexing in search engines.

If you are looking for a software house that will efficiently guide you through the meanders of available web solutions and help you develop an action plan that will best meet your business goals – contact us.