What's the difference between single-page application and multi-page application?

What's the difference between single-page application and multi-page application?


Nowadays, websites more and more look like applications with many interaction possibilities rather than static pages we had around 10 years ago. On the one hand, the reasons for that lie in the users' demand for receiving and generating information based on their personal characteristics and requirements. On the other hand, website owners want to provide users with more convenient user interfaces to work with the information.

Let’s take a look at how we can build a front-end part of the websites. There are two main ways of building websites today: a multi-page application (MPA) - a more traditional way and a single-page application (SPA) - a more modern way. Let’s start with the multi-page approach.

Multi-page application approach

Multi-page application approach

In the simplest form, a multi-page application consists of several pages with static information (text, images, etc) and links to the other pages with the same content. During a jump to another page, a browser reloads the content of a page completely and downloads all resources again, even the components which are repeated throughout all pages (e.g., header, footer). The main technologies for such a type of website building are HTML and CSS. It was the first way of developing websites so developers are quite experienced in it and have many solutions for you. It allows creating uncomplicated websites of this type quite fast and without any problems.

Examples of multi-page applications we built:

Issues of multi-page applications and their enhancing by using new technologies

During development, a necessity in more complicated interactive components may occur (e.g., in forms). In this case, you still can use the traditional way but you will be bounded by standard functionality. However, there are more suitable technologies for non-standard, complicated and interactive things and they are JavaScript with AJAX (asynchronous JavaScript and XML). The prosperity of Web 2.0 became possible due to the evolution of these technologies. Now you can implement multi-step forms, various charts, graphs, and diagrams on your website with a dynamic refresh, with keeping various states, and with no need to reload the whole page. Those technologies help to integrate SaaS on your website through APIs as well and their usage improves user experience (UX) a lot.

But at one moment you can realize that your website has become too complex with the multi-page application approach and you can find yourself creating your own framework to maintain cumbersome UI on a back-end. At first, you can divide your back-end and front-end with REST API and they will communicate in a specific language of queries. At this point in time, you will need some front-end solutions. Many companies have already faced the same problems and they realized the benefit from making a source of their project open: you provide a community with a platform and the community accelerates the evolution of the solution. It’s a win-win situation. Today you have a choice between plenty of solutions with large communities and ecosystems, e.g.:

Also, there is a huge codebase in NPM (Node Package Manager) where you can find solutions for almost all problems. So currently with the help of a community and its ecosystem, it’s not that hard to create dynamic, nontrivial solutions and integrate them into multi-page application websites.

Let's see the good examples of what functionality can be integrated with modern technologies into a multi-page application website. Here are two multi-page application examples.  

With the increasing role of the interaction between a user and a website, the role of JavaScript becomes even more important and, following the evolution of Web 2.0, there appears a new way of creating a presentational part of your website - single-page application, which reveals the full power of modern technologies.

Single-page application approach

Single-page application approach

When you enter a single-page application website, you download a page only one time and then the components of the page change and load only when it is required. Because of that, such a website is much faster than a multi-page application. Also, if you build a single-page application, you usually use a solid mature ecosystem (it happens the other way round when you integrate interactive elements on multi-page application websites).

In addition to that, a back-end and a front-end are separated and they don’t interfere in each other’s concerns. Such an approach of development allows you to apply the latest and the most sensible patterns of developing websites and gain many profits in the long term.

However, the way of constructing single-page applications raises new problems (e.g., SEO, Performance & Optimization, Analytics), but they all have solutions already - you just need to remember about these moments. For example, find how to improve your SPA and solve an SEO problem in this guide. And because of these problems, developers should have particular knowledge and experience to build a website properly.

The examples of single-page application websites

  • Gmail (Google Mail)
  • Twitch
  • GitLab

Other ways of applying modern front-end technologies

At the same time, a single-page application approach not only solves many problems but opens new opportunities: you can create user interfaces for mobile and desktop applications using one codebase, or create mobile and desktop applications without creating a web version at all; also, you can create offline applications which can be used without an Internet connection and many companies experiment with technologies like a virtual and an augmented reality using web technologies (e.g., React VR).


Let's sum up all the pros and cons of both approaches.

Multi-page Application


  • The simplicity of building static pages and small websites
  • Fast creation of a minimum viable product (MVP)


  • Difficulties with adding dynamics
  • Low flexibility
  • The increasing cost of changes during adding new functionality

Possible use cases

Low and middle scale websites without much dynamics and state, e.g.:

  • landings
  • content-oriented websites without much complexity
  • prototype websites

Single-Page Application


  • Less complex dynamic components building
  • Less complex large and non-trivial websites building
  • Better user experience
  • Less load on the server
  • Better client-server interaction, the dividing of front-end’s and back-end’s concerns
  • Low cost of support in the long term

Moments that you should remember about

  • Security: many problems of security become the concern of front-end developers and they should know and remember about it (you can familiarize yourself with the main problems here.
  • SEO: you need to take care of server-side rendering if you need search indexing and optimization.
  • Enabled JavaScript: today it’s hard to imagine a website without JavaScript functionality and browsers’ support of it, so you can assume that it is enabled everywhere by default. But if you face the situation when you need to consider such a case - a server-side rendering will help you.
  • Browser history: the single-page application doesn’t save your jumps to other states and you can’t go back and forth with your browser by default, but most of the front-end frameworks and ecosystems have routers which use Browser History API and they solve this problem.
  • Analytics: analytics of the pages relies on page loads and you can use page load events to eliminate the problem.
  • Performance & Optimization: you should remember about mobile and low-performance devices because JavaScript usage is quite heavy in single-page applications. Also, you should remember about the weight of your bundle and consider creating chunks with the dynamic load to improve user experience (e.g., you can use the new Uber website after the first 50Kb loaded and it’s fast even with 2G networks).


  • Complexity
  • You need more time to create a minimum viable product (MVP)

Possible use cases

Medium or large scale websites, or websites with much dynamics and state:

  • websites with a lot of user interfaces
  • SaaS (Software as a Service) platforms or Internet services in general
  • data-driven and form-intensive applications
  • mobile applications
  • desktop applications
  • experimental fields(VR, AR)

Useful links

  1. React, library
  2. Angular, library
  3. Vue.js, library
  4. Forms and quizzes demo: Vue.js, code
  5. Gmail (Google Mail)
  6. Twitch
  7. GitLab
  8. Uber website
  9. How to build a single-page application (SPA) with Vue.js
  10. The easiest way to improve your Vue.js application. Part 1
  11. The Alutech United Inc. project

You might also like

What are React.js Components?

React follows the principles of component-oriented programming that added the notion of component — a reusable part of code — to the developers’ vocabulary. The high speed of development on React the React is favored for is based exactly on the components.

What React is and why it can cut the cost of website development

For years React.js has been one of the most popular and efficient tools used for complex web interfaces development. In this post, we are going to tell you – briefly and almost without using any intricate concepts – about React, the way it appeared and the benefits it offers for a business and contractor’s team.