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.
Contents:
- 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?
Single-page applications are built with JavaScript frameworks, and developers choose the framework depending on a number of factors, including personal preferences. Here are the big three JavaScript frameworks today according to our developers at Mind Studios:
React |
The slowest of the big three, React also has fewer out-of-the-box features than the others. It does have built-in protection against cross-scripting attacks, however, and it’s developed and used by Facebook. React is the most popular JavaScript framework today. |
Angular |
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. |
Vue |
The youngest JavaScript framework and hence only gaining popularity, Vue is the easiest to learn and has more features than React but fewer than Angular. Vue is an open source project and is developed by the community, which makes it quite promising. |
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 SPAs 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.
Besides that, the advantages of SPAs include greatly simplified Chrome debugging thanks to native developer tools for the three most popular JavaScript frameworks.
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.
1. Disabled JavaScript
Single page apps are developed using JavaScript frameworks — React, Vue, Angular, and sometimes others. Therefore, if users have JavaScript disabled in their browsers, they’ll see an empty page. This issue can be partially solved using server-side rendering (SSR), in which case the app is processed on the server instead of in the browser. It’s not a perfect solution, but it works to a certain extent. Fortunately, not too many users disable JavaScript in their browsers in the first place.
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.
3. Scalability
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.
Fortunately, JavaScript frameworks have so-called code-splitting routers, also known to some as chunk lazy loading packs. These allow code to be loaded in chunks (hence the name) to make a site load faster.
4. Security concerns
Single page apps are susceptible to cross-site scripting (XSS) attacks. This is a vulnerability that allows hackers to inject malicious code into a JavaScript-based web app. React.js has built-in XSS protection, though, and there are other ways for an experienced web developer to protect a web app against any kind of attack.
5. Navigation
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
1. Navigation
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.
2. Scalability
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.
3. SEO
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.
2. Development
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.
3. Adaptability
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.
| Characteristic | Winner |
|---|---|
Speed and performance |
SPA Dynamic content loading eliminates page reloads and shortens loading times. |
Development |
SPA 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. |
Navigation |
MPA 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. |
Scalability |
MPA MPAs are infinitely scalable, whereas to scale an SPA, your developers might need to rewrite big chunks of code. |
Security |
Tie 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. |
Adaptability |
SPA 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. |
SEO |
Tie 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
Progressive web apps, or PWAs, have been a web development trend these last couple of years. In short, a PWA is a mix between a web app and a native app. At their core, they’re web apps — usually single-page apps — as they use JavaScript, HTML, and CSS. But they can be anchored to a smartphone’s home screen and to some extent work offline, like a native app.
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
- Frontend developer specializing in JavaScript and its frameworks
- 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.
Conclusion: SPA vs MPA
Single-page applications are conquering the world right now. And while it’s too early to set MPAs aside, we’re of the opinion that you can’t — and shouldn’t — stop the progress. That is to say, at Mind Studios, we keep our eyes forward and track the newest technologies, which happen to mostly be for SPA development. Our developers are well-acquainted with both traditional methods of website development and with JavaScript frameworks, so we can build your web app the way you want it.
If you’d like to know more about how to develop a SPA or if you would like a consultation, reach out to us.
Written by Artem Chervichnik and Svitlana Varaksina.
