In this post I’m going to break down EVERYTHING about single-page application vs multiple-page application.
So if you are looking for a DEEP comparison of these two types of web applications or websites, you’ve come to the right place.
In this post, you will learn which projects are better to develop as a single-page application (SPA) or multiple-page application (MPA). You will see what single-page applications have in common as well as multiple-page applications and how to improve them.
In this post I will cover:Web Application Vectors by Vecteezy
What Is a Single-Page Application?
A single-page application (SPA) is a web application or a website, which is able to dynamically rewrite a web page in a web browser instead of loading the entire page every time in response to user actions. With that being said, user actions such as clicking on certain buttons or links don’t force the page to reload in web browser.
If definition above is still confusing, it’s best to explain by giving an example. Let’s start with a traditional multiple-page application. As you interact with Amazon website, url address changes in web browser which cause entire web page to reload. On the opposite, when you interact with LinkedIn website, a web page content changes, but web browser doesn’t reload the web page. A web page is reloaded when circle spins in Google Chrome’s URL panel, or a dot moves in Firefox.
A single-page application loads only the requested content. This would result in much faster communications and content reloading. In multiple-page application, the user is forced to wait for the page to load, even if most of the page’s content remains the same.
How does a Single-Page Application Work?
Once a single page application is loaded, it can dynamically transfer the content from the server using AJAX requests or WebSocket. Data is returned from a server usually in a JSON format, which is processed by SPA. This allows the browser to make requests to the server to transfer new or additional content without changing the current web page. In addition, HTML5 History API allows us to modify a website’s URL without a full page refresh.
Single-Page Application Examples
Let’s take a look at the most popular web applications and websites, which use single-page application techniques to improve the application’s performance and overall user experience.
I am going to present web applications, which don’t need to be necessarily single-page applications. These applications are complex and I don’t know all their parts, URLs and interactions. Thus, I can’t evaluate their overall architecture. However, I am going to emphasize their specific parts, which are very common in single-page application architecture.
Gmail is one of the most popular email services developed by Google. Interacting with Gmail is engaging and smooth. As you can see in the video above, you can view your inbox, compose new email message and search very fast without reloading the page. When I use Gmail, I feel very productive. Gmail’s user experience is strong competivive advantage compare to other email web services.
Facebook newsfeed feature allows users to consume content in a creative way. Users can interact with newsfeed and watch video on it, without reloading or leaving the feed page.
Spotify is an audio streaming platform. Its web application allows users to interact with playlist, search songs and listen to audio tracks simultaneously.
Booking stays through AirBnB is very fast and smooth. Users don’t see any delays between loading different pages.
Trello is a visual collaboration tool where you organize your projects onto boards with lists and cards, which represent tasks. You can create and edit lists, cards, search without page reload. Productivity is critical, especially for tools used for collaboration and management. Trello would loose this advantage with a multiple-page architecture.
Evernote is a SaaS designed for taking and organizing notes. You can see their web application in the video above. Making notes is very fast and productivity is important for note taking applications.
Google Maps allows users to scroll map, view details and planning routes. Interacting with map is smooth and whole user interface is very user friendly.
Slack is popoluar collaboration tool for instant messaging. As you can see in the video above, Slack provides seamless user interface. Productivity is very important here and most of the times users don’t notice any delays when they interact with Slack application. Before Slack, there were a lot of instant messaging applications and collaboration tools. Slack added new features such as channels, threaded messages and more. They have a lot of competition and wouldn’t be successful without fast user experience.
Single-Page Application Advantages and Disadvantages
Performance & User Experience
Only data that are transmitted to and from the server changes. This decreases the server-client traffic and makes single-page application faster to user requests.
Single-page applications are faster and more responsive than multiple-page applications.
Adaptability & Portability
Single-page application is highly decoupled between client and server and their source code is separated in different projects. If the server part (back-end) of a web application is a separate project, you can use the most of the back-end code for desktop, web or mobile application. The separation between front-end and back-end gives you better ability to use a serverless architecture instead of building back-end from scratch.
Single-page applications are significantly easier to port from web to mobile or a native application and vice versa.
Price & Complexity
It’s not surprising that achieving search engine visibility SEO can be challenging. There are libraries, which help you to make your single-page application available for search engines. However, if your single-page application’s content is changing dynamically, you need to use server-side rendering for your single-page application. It can be very challenging even for a developer who has experience with single-page applications.
For these reasons, many software developers, especially back-end developers started hating single-page application concept. I came across a lot of single-page applications, where I see the same mistakes over and over again. I can’t blame unexperienced developers for doing these mistakes, because they can avoid them only after some experience. For this reason, I decided to start writing an ebook Single-Page Application Best Practices. It is not finished yet, but I can send you a free copy when it is done.
How to Build a Single-Page Application?
What Is a Multi-Page Application?
A multi-page application reloads the entire page and displays the new one when a user interacts with the web application. With that being said, user actions force the page to reload in web browser. Even if changes between pages are small, the browser reloads the entire page.
You can see this behavior in multiple-page application examples. When you interact with website and want to display a new page, the browser reloads the web page.
How does a Multiple-Page Application Work?
Multiple-Page Application Examples
In this section, you can see how multiple-page applications work. These applications probably use single-page techniques in some parts, but their main architecture is multiple-page. I wanted to focus on their multiple-page behavior, where you can see how transitions between pages are delayed and browser reloads each new page.
Amazon is probably one of the most complex e-commerce stores. When you navigate through store categories and item details, you can see how browser is reloading.
Medium is popular blogging platform. In the video above you can see interactions when users want to add a comment and see others comments. You can see the delays between loading pages, because these interactions are developed as multiple-page. These interactions could be developed as single-page and be more user friendly.
Delta is one of the major airlines of the US. You can see a long delay between each booking step. When you set up booking parameters and hit “search”, you can compare the delay on Delta’s website with AirBnB’s website. I am not sure if I had ever seen an airline company using a single-page architecture. I wish booking flights was more user friendly. If you know about airlines companies using SPA and seamless user experience, please comment this post.
IMDb is an online database of information related to films, tv shows and actors. When you navigate through website, you can see how browser is reloading. Would be nice to watch a trailer and read information or reviews about a movie, but this is not possible with multiple-page architecture.
Multiple-Page Application Advantages and Disadvantages
Performance & User Experience
If you take a look at BitSight’s case study, there is no doubt that single-page applications are more performant than multiple-page applications. However, users can’t notice a big difference in small projects with few elements. On the other hand, you can see a difference in bigger projects, for example in the booking process on AirBnB and Delta Airlines. There are project, where user experience is important and in this case, multiple-page architecture is a disadvantage.
Adaptability & Portability
A multiple-page application is highly coupled between client and server. It is usually one big project, which contains front-end code and back-end code. If you want to separate them later, it’s more complicated than in single-page architecture and it makes native or mobile application harder to develop.
Price & Complexity
Multiple-page application architecture is more established in software development than single-page application architecture. When software engineers or web developers learn to build web applications, they start with traditional request-response model and multiple-page architecture.
Achieving search engine visibility in multiple-page applications is by default without any obstacles. The reason is that search engines use web crawlers, robots who try to navigate through the whole website and visit every page to index all pages in search engine. Web crawlers have more challenges in single-page application architecture, where users interactions change content of a single web page. There are solutions for making single-page applications visible for search engines, but the price is more complexity in your project.
Multiple-page applications are cheaper to develop. You can find more developers, who are able to develop multiple-page applications than those ones who are able to develop single-page applications.
How to Build a Multiple-Page Application?
SPA vs MPA – Which One to Choose?
If you take a look at single-page application examples and multiple-page application examples, you can see similar behavior of these applications in both groups.
In the first group where are single-page applications, users interact very frequently on a single page. Productivity is one of the most important aspects of applications used for example in collaboration. In the second group, where are multiple-page applications, users don’t interact a lot on a single page. They usually need to consume content and do some simple tasks.
However, we can find web applications, which don’t need to be necessarily single-page applications or multiple-page. As an example, you can see this as a searching process on AirBnB and Delta Airlines. AirBnB decided to develop this process as convenient as possible for users and they chose a single-page architecture. Delta Airlines and most airlines chose traditional multiple-page architecture, which is not so efficient as you can see in the example. Choosing to develop a single-page application vs multiple-page application is more subjective in this case.
There is a lot of web applications where search engine visibility (SEO) is important and content of web application is dynamic. Let’s say you want to create a marketplace where people can list their products. If you choose single-page architecture, you would need to use server-side rendering. Developing single-page applications that support server-side rendering has specific rules and only experienced single-page application developers are able to develop it efficiently.
Trulia is a real estate marketplace. Its content is dynamic and should be visible for search engines. This marketplace wants to provide a fast user experience and they chose single-page application and server-side rendering. You don’t need to be one of the biggest IT companies to build a solution like this, but building it as a multiple-page application would cost less.
A lot of Content Management Systems were built when single-page applications didn’t exist. They provide a lot of tools to build websites based on common requirements and easy to manage. In most cases, static websites and e-commerce stores are much easier to develop using a robust CMS with multiple-page architecture instead of building it as a single-page application from scratch. They are mostly static and you can add interactivity on specific pages later.
We can see that amount of single-page applications is increasing, and many applications transfer from multiple-page architecture to single-page architecture. Even if web applications are developed as multiple-page, they use single-page techniques to be able to dynamically change content on a single page. We will see this trend more often in the future.
If you want to build an MVP, you can decide using a serverless architecture, which can significantly streamline the development process. In this case, it doesn’t make any sense of building a multiple-page application.
In this post, you can find an explanation of what is a single-page application and how it works. Then, you can find what is a multiple-page application. This post contains a single-page application and multiple-page application examples and their advantages and disadvantages. Each example is commented and later you can find a comprehensive description of MPA vs SPA and how to improve them.
I hope this post is helpful and you found an answer what’s the difference between single-page application vs multiple-page application and which one to choose for your project. I would love to hear from you if you think something is missing in this post. Did I miss anything in this comparison SPA vs MPA?