Single-page web apps have existed for almost twenty years already, but their popularity is relatively new. The reason for that is technological development: current technology allows developers to turn what used to be major drawbacks into workable solutions or even benefits. In this article, we’ll talk about the differences between single-page applications and multi-page applications and which to choose for your business.
The single-page application (SPA) vs multi-page application (MPA) battle is more complex than it seems. Let’s take a close look at all the pros and cons of each type of web application.
- What’s an SPA?
- How are SPAs built?
- Advantages of SPA
- Disadvantages of SPA
- What’s an MPA?
- Advantages of MPA
- Disadvantages of multi-page web apps
- SPA vs MPA — Which one to choose?
- Progressive web apps
- How much does it cost to develop an SPA and MPA?
What’s an SPA?
In layman’s terms, a single-page application is a web application in which content is loaded dynamically without needing to reload the page. For example, as you check your feed on Facebook or Twitter or your email in the Gmail web app, you don’t see an aggravating page loading screen. You scroll and switch between tabs and content is loaded instantly.
In a single-page web app, all HTML and CSS is loaded once, when you open the page. After that, as you move around the site, only the new data is loaded; the page itself doesn’t reload. This makes the user experience smoother — there’s little to no waiting time, for one thing, and pages appear to load instantly. In a world where a 100-millisecond lag can bring over $1.6 million in lost sales, that’s an issue business owners can’t afford to ignore.
How are SPAs built?
Angular has lengthy code but the most built-in features, so it requires fewer extra technologies in your stack than React or Vue. Developed and used by Google, Angular is the second most popular JS framework.
Most good frontend developers know more than one framework. Many know React, Angular, Vue, and then some.
Advantages of single-page applications
The advantages of single-page applications are numerous, which is why they’ve come to be so popular despite several drawbacks. In fact, with current technology, those drawbacks can be dealt with to a certain extent, making SPAs the choice of more and more website owners. We’ll start with the pros of SPAs, then cover the cons.
1. Fast page loading
Fast and smooth switching between pages, with no need to actively reload, has become the biggest weapon in the SPA vs MPA battle. Dynamic loading — loading content in small parts instead of all at once — greatly shortens response times, improving the user experience.
SPAs partially move content processing from servers to the browser. This way, there’s less need for the browser to send requests to servers and await responses. Thanks to this, SPAs can even work offline to an extent.
2. Separate the front end and back end
One of the other advantages of single-page apps is that unlike MPAs, in which the front end and back end are tightly connected, in an SPA, you can rewrite the front end alone, with a minimum effect on the back end. This makes updating SPAs easier, faster, and cheaper. But a bigger perk of separate front and back ends is that you can use an SPA back end for a mobile application if/when you decide to build one. With an MPA, you’ll need to rebuild the back end for a mobile app — not from scratch, but significantly.
3. Development and maintenance
Building an SPA takes less time than building an MPA. It’s not necessarily easier — the tech stack for an SPA is slightly larger than for an MPA — but it does take less time, since there’s no need to write code and create separate UI/UX designs for each page.
Now on to the drawbacks.
Disadvantages of single-page web applications (and how to overcome them)
According to 2018 research by Unbound, almost 70% of users say page loading speed affects their decision to buy or not to buy from a site. However, most marketplaces are built as slower MPAs, since the disadvantages of SPAs are particularly inconvenient for large online stores. Developers have been pushing SPA development to solve the issues that prevent online store owners from building their websites as SPAs. The following are the disadvantages of single-page applications and how they can be overcome with today’s technology.
2. Search engine optimization
Since single-page web apps load content via AJAX, what a search bot gets, essentially, is a DOM (Document Object Model) element — a web app structure without content. Meaning there are no keywords to acquire right away.
This, consequently, leads to low search engine rankings for SPAs. And when it’s vital for a site to rank high to be found by users, proper SEO is a must. Hence, for such websites, developers usually recommend multi-page applications.
However, the SEO problem is another one that’s resolvable with server-side rendering. Server-side rendering sends (upon request) a fully loaded page as it’s displayed on the server instead of loading content as the user navigates the page. This allows crawlers to work better with SPAs.
Another way to up your web app’s SEO game is for your developers to code the site with proper tags for navigation between web pages to help search bots cover the whole website.
SPAs aren’t very scalable in terms of adding new features and completely new functionality. This is because with everything written as a single page, inserting new features can disrupt the code, so developers need to be careful. Besides, too much extra code can make your single page load too slowly, since the whole code base is loaded right away.
4. Security concerns
A single-page web app is exactly that — a single page. This means there’s only one URL for the whole site. This makes it hard to navigate — forward and backward buttons usually don’t work, and linking to a specific part of the content is impossible.
This issue can be solved with an API. There are APIs that add path prefixes to dynamic values, making it possible to link to specific parts of the page, usually headings.
What’s an MPA?
A multi-page web app is what we consider a traditional website — when moving from one page to another, the site fully reloads. With this kind of website, loading can sometimes be a bother, especially if your connection speed is slow and you need to visit multiple pages with media.
Without taking too close a look, it might seem that MPAs are a relic of the past and will soon be all but extinct. Surely, faster page loading is always better for sales. However, it’s not that simple, and there are cases when an MPA is the better choice.
Advantages of multi-page apps
The biggest perk of multi-page web apps is that they allow for traditional navigation. By that, we mean that each page of an MPA has its own URL that users can copy and paste, add to bookmarks, share, etc. The backward and forward buttons in browsers also work without a hiccup. In an SPA, to make separate URLs and enable users to jump back and forth between inner “pages” via buttons, your developers will need to employ an API.
Here’s an undeniable advantage of multi-page web apps: with an MPA, your website is as scalable as you want it to be. You can build dozens upon dozens of pages, dividing content for easier navigation and faster loading. Since SPAs usually load the whole website structure — the DOM — once, if your website has a lot of code (if you have an online store, for example), building it as an SPA will require extra technologies in your stack. This is why it’s not uncommon for web developers to suggest MPAs for online stores instead.
If your business relies heavily on search engine results, consider a multi-page web app, as they usually rank better. An SPA’s dynamic content loading gets in the way of search engine crawlers, an issue MPAs don’t face. Whereas SPAs once again require your developers to employ additional SEO technology, an MPA is naturally on good terms with search engines.
4. Tech stack
Being the older of the two types of web apps, MPAs have a more developed tech stack and a somewhat bigger developer community. Also, while they take longer to develop due to the numerous pages, multi-page web apps are built with a simpler and smaller tech stack than SPAs.
Disadvantages of multi-page web apps
1. The issue with loading speed isn’t black and white
First of all, MPAs aren’t exactly slower than SPAs. What they’re slower at — compared to SPAs — is switching between pages. This is because with an MPA, each time a user tries to change the page (go to their profile or proceed to checkout, for example), the site sends a request to the server for the new page’s code. The request itself and the response take time to process, hence the loading time.
The time needed for a new page to load depends on multiple factors:
The user’s internet connection speed
The amount and type of content being loaded
How many users are visiting the site simultaneously
How powerful the site’s servers are
The technology the site is built on
The skills and experience of your frontend developers
On the other hand, SPAs load the entirety of code the moment a user opens the site. After that, it’s just switching between inner “tabs” on the same page, dynamically showing the requested content from the fully loaded cache. And when there’s a lot of code, this initial loading can take much longer with an SPA than with an MPA. So when you need to choose between an MPA and an SPA, as the saying goes, it all depends.
Building a multi-page web application takes longer than building a single-page app. This is because each page in your web app will need separate code and a separate design. Depending on the number and complexity of features, the time might also affect the cost, since most companies and freelancers charge by hours spent on work.
MPAs are primarily built for desktop browsers, and while today everyone makes their website’s interfaces flexible for mobile browsers, full adaptability is harder for MPAs than for SPAs. Single-page applications even look a lot like native mobile apps, whereas multi-page apps on mobile devices look like websites in portrait mode.
And it’s not just the UI. If at some point you decide to build a native mobile app based off your multi-page website, you’ll need to create the UI/UX, visuals, and back-end all from scratch. SPAs, in turn, allow you to reuse the back-end and often have a front end similar to that of a mobile app interface.
SPA vs MPA — Which one to choose?
To summarize all we’ve laid out above, look at the following table outlining the major differences between a single-page and a multi-page web application.
Speed and performance
Dynamic content loading eliminates page reloads and shortens loading times.
Despite the bigger tech stack, developing, testing, and launching a single-page web app takes a lot less time than developing, testing, and launching a multi-page app. There’s no need to write code and design an interface for multiple pages.
To make an SPA where users can easily navigate back and forth as well as share links to a specific location on the site, developers need to use APIs.
MPAs are infinitely scalable, whereas to scale an SPA, your developers might need to rewrite big chunks of code.
While people always point out how SPAs are exposed to cross-scripting attacks, MPAs also have security vulnerabilities, including weaknesses against injection, which is similar to XSS. The key here is to know about these weaknesses and build in protection.
Single-page applications are inherently more flexible when it comes to design. They’re easier to adapt from desktop to mobile and vice versa.
Additionally, an SPA back end can be reused for a mobile app, usually along with the interface design.
To make SPAs SEO-friendly, your developers will need to employ server-side rendering and keep in mind tags from the very beginning of development. But it’s not difficult, nor is it a lengthy process. So today, it’s not much of a drawback for SPAs compared to MPAs.
As you can see, both kinds of web apps come with their strengths and weaknesses. And while single-page application technology is progressing fast and SPAs might soon overpower traditional websites, today, you still need to weigh the pros and cons before deciding what type of website to build for your business: an SPA or MPA.
A little extra: Progressive web apps
You know how you can create shortcuts to apps and folders on your computer’s desktop? PWAs work in a similar manner, but they create app-looking links to web pages on your smartphone’s home screen. With the latest tech stack and APIs, they load a certain amount of data to the smartphone’s cache so the app can operate offline if needed.
PWAs aren’t yet as feature-rich as native apps — they can’t use NFC, Bluetooth, or smartphone features that require certain permissions. They don’t offer complete offline functionality either. But they’re flexible, easy to build, cheap to develop, and place a constant reminder of your website on users’ phones.
How much does it cost to develop an SPA and MPA?
Single-page applications are gaining in popularity for a reason. As you can see, most issues SPAs have can be mitigated, and therefore aren’t the death of your web app. That is to say, you’ll still need to employ extra technologies for those solutions, and that can affect the time and cost to develop a single-page application. You’ll need to assess all sides of your idea and take into account the experience of your web development company before deciding whether to develop an SPA or MPA.
Here are just some of the parameters that can be added to the equation:
- Type of your business
- Size of the website
- Scalability requirements
- Importance of SEO for your site
If you decide to go with a single-page app, you’ll need to hire a development company that has the following specialists:
- Project manager
- UI/UX web designer
- Backend developer
- QA engineer
Of course, the cost to build an SPA website will depend on the size and type of the site, its feature set, and the tech stack needed, so we can only roughly estimate it.
A simple single-page application — a landing page, for example — can be created in two to four weeks and cost as little as $4,200. A more complex SaaS platform can take three or four months to research, build, and launch. The cost of developing such an SPA will be about $29,000 and up. The experience of developers can also affect the time needed to create a single-page web app, since the tech stack for an SPA is bigger than for an MPA.
On the other hand, the simplest multi-page application with more than a single page (otherwise, what’s the meaning, right?) will take approximately four to five months to code, costing anywhere between $35,000 and $42,000 depending on the complexity and design. The more features you need, the higher the price and the longer the development time.
Written by Artem Chervichnik and Svitlana Varaksina.