When, Why, and How to Create a Single-Page Application (SPA)?

What do Gmail, Facebook, Trello, and Netflix have in common?

Besides being some of the most famous and successful web projects, technically, they are all single-page applications. Single page application development has been all the rage for several years with startuppers. What makes them so snazzy and why aren’t all apps made with a single page?

Read on to find out if SPA development is the right choice for your project and get valuable tips that can save your money and avoid headaches.

What is SPA and How Is It Different from Traditional Apps?

SPA, in information technologies, is not a relaxing, luxurious resort, but a way to build an application. Let’s explain.

Conventionally, most apps consist of many web pages and are called Multi-Page Apps (MPA). Each page is created with its own HTML code connected to the server. Each time a user clicks some link on the page he or she is redirected to a new (or refreshed) page of the application. Usually, it takes several seconds to wait while the entire page structure loads again. 

An SPA has only one web page, and each time something happens, only part of the page is reloaded while the rest of the HTML remains unchanged. For example, open your Gmail, Pinterest, or Facebook and try to catch the moment when a new email arrives, or a new post appears on the news feed. You’ll see that no other UI elements of the page even blink.

So, how does an SPA work?

How Does an SPA Work?

With an SPA, most content is loaded as an HTML file from the server only once when the page is first opened. That’s it. The rest of the work is performed on the client-side with the help of JavaScript. The application calls the server for pieces of data that are returned in JSON format. Due to AJAX, the data is transmitted back and forth to the server independently on the markup and this allows it to dynamically update only the required parts of the data without needing to constantly upload the whole page from the server. With this mechanism, SPAs instantly react to each user action or content update, saving valuable seconds.

The original load takes more time than traditional websites, but then the app shows extraordinary swiftness. Basically, if you open a link to some website and see a loading bar or spinner, it’s probably an SPA.

In contrast, traditional multi-page apps render all the processes on the server-side, and though it fetches the initial page faster than an SPA, all subsequent data is reloaded multiple times, requiring a lot of time. Moreover, promptness is not the only advantage of a single-page application design. What else?

Why Create a Single-Page Application? Advantages and Disadvantages

There are several reasons why you should create a single-page application instead of an MPA or a mobile app. The most important are:

• Linear navigation — an SPA provides easy, linear navigation as the user only needs to scroll down without moving to different tabs and pages like an MPA. Good examples of this experience are Instagram, Pinterest, or a Facebook news feed. Uninterrupted scrolling increases the time spent in the app, improving the website rating.
• Instant loading — most of the content in an SPA is downloaded only once and all the following updates come in a flash, without the need to refresh the whole page. In contrast, traditional websites reload the entire page with each click.
• Offline mode — an SPA lives on even with a poor Internet connection providing users with a more comfortable experience. This happens due to the ability of an SPA to cache data in local storage and then synchronize it with the server when the connection is restored.
• Native-like UX — an SPA allows bright and highly interactive apps with a native mobile app look & feel that appeals to users. For example, for one of our clients, we created a microblogging SPA with a swiping feature like Tinder. With an MPA, the user experience is more conservative and structured.
• Feature-rich interface — an SPA works well with many interactive features. For example, you can add voting, reporting, or messaging that will update in real-time. With a traditional web app, such features would require a total page reload.
• Cross-platform adaptability — SPAs perfectly adapt to any browser, and look native on any device or screen size. Even so, it does not require extra development. You need to create only one code base that is usable on all devices and browsers. This is why building single-page applications is much cheaper than building separate mobile applications for each platform.
• Flexibility — if you need to make changes in the single-page app design or want to completely redesign it, you can simply rewrite a front-end, while leaving the back-end as is, or making only minor changes. MPAs, on the other hand, have a slew of dependencies between a front-end and a back-end that demand complicated and time-consuming alterations.
• Quicker and cheaper development — SPAs do not require a lot of back-end development and it can be done in parallel with the front-end. In contrast, in MPA development, the front-end depends on the back-end, and vice versa — slowing down the process. Using Javascript frameworks (React, Vue, Angular) makes for quicker development. Overall, these advantages reduce the project development time from months to weeks which is perfect for the MVP and speeds up time to market.

Sounds wonderful, right? So why didn’t the SPA approach conquer the Internet, replacing traditional websites? To answer this question, let’s look at the disadvantages of single-page applications:

• SEO issues — Most web projects need to be searchable. This is one of the major reasons why SPAs haven’t replaced traditional websites. Traditionally, all pages are rendered on the server-side, and search engine bots crawl and index this content. SPA content, on the contrary, is rendered on the client-side; bots have difficulty indexing such content. Moreover, SPAs possess only one link, whereas an MPA consists of several pages with unique URLs, headings, and keywords evenly spread over the pages. However, this is not a catastrophe for SPAs, and below we’ll explain how to overcome these issues.
• Longer initial load time — the initial page can take a bit longer to load than traditional web pages because an SPA loads everything at once. Some users may lose patience in this case and get frustrated; what’s more, this slow loading time may be negatively perceived by Google.
• Inability to work under high loads — an SPA application is not designed for solutions that process large amounts of data or thousands of operations at once. SPAs are great for simple user workflows.
• Security issues — SPAs are more susceptible to data breaches than MPAs that have every page separately secured on the server. Most of the app's interactions are made on the client's side, and any unencrypted connections or vulnerabilities in code may allow hackers to inject malicious code and steal users’ sensitive data. Below, we’ll talk about how to improve SPA security.
• Low scalability — with SPAs, it can be hard to add new features while maintaining minimalism and usability. With an MPA, you can add new pages. SPA content, however, is placed on a single page — sometimes the only way to add a new element is to redesign the whole app.
• Single sharable link — because an SPA uses only one link, it is difficult to share a specific piece of content.
• JS settings dependency — if a user disables Javascript in the browser, either accidentally or on purpose, SPAs will be unavailable.
• No back and forth navigation — SPAs lack one of the traditional features that many users have become accustomed to. The ‘Next’ and ‘Back’ links do not send you to the previously visited page but simply reload the whole page.
• No history of visits — another problem caused by having only one link for the whole application is that the history will show a single link without distinct links to earlier destinations.
• Poor Google Analytics (GA) tracking — GA is an excellent tool to collect data like the number of views, session duration, bounce rate, and user behavior flow. With traditional websites, Google Analytics tracks all the traffic performed on the site while users navigate through different pages. In a single-page application, the possibilities of GA are restricted to one page with few opportunities for data collection.

Below we explain how skilled SPA web development can minimize these disadvantages.

How to Overcome the Shortcomings

Accelerating initial page loading

Users may not want to wait while all the rich content of the SPA loads the first time. Luckily, there are ways to streamline loading. Google recommends SPA developers use pre-rendering of static pages or server-side rendering (SSR) of the initial HTML page to show part of the page immediately.

Also, using CDN can speed up the initial load of the application. When a user opens an app, heavy content like photos or videos will not be loaded from a server miles away from the user, but instead from the nearest server.

Fixing SEO

Most search engines are not excited about JS-based websites. For now, only Googlebot and Bingbot are able to index these popular apps. To solve this challenge, Google uses dynamic rendering which means that the server will provide two versions of the content — one that will be immediately delivered to the users, and another that will be created in a form suitable for the search engine bot, for example, in static HTML.

Keep in mind that the implementation of server-side rendering may increase the development time and the cost of the project because it requires more infrastructure and effort. Thus, it should be made only if it increases user satisfaction and generates increased traffic.

Increasing security

As mentioned above, SPAs are more vulnerable to hackers than traditional websites. Experienced developers, however, can prevent most security breaches. For example, at Greenice, we use the latest security practices such as encryption of transferred data, updated React frameworks, reliable payment services, and secure AWS infrastructure.

Improve navigation

Although SPAs do not use history caching there is a solution that allows users to quickly find previously visited pages by hitting the ‘back’ and ‘next’ buttons. Developers can use an HTML5 History API to access the browser navigation history. Thus, when a user clicks the back button, the page rolls back to the previous state.

Which to Choose: SPA or MPA?

You’ve seen the SPA pros and cons. You can now choose what is the best choice for you — SPA or MPA. First, let’s sum up the key differences between SPA and MPA:

When to Build an MPA?

Now let’s list the cases when creating an SPA is NOT feasible.

Steer clear of SPAs, and go with a traditional website or app, if

• Your app is designed to work under high-loads

Forget about an SPA if you are going to create an ERP. Such apps process tons of data exploited by thousands of users simultaneously, deal with payments, and usually have to synchronize data among several places. SPA web design is great for simple user workflows.

• You want to create a large online platform

Just imagine Amazon or another multi-category website selling all its goods through one page. A nightmare! Such platforms need many pages for each seller, category, product, and customer. SPAs are known for their neat, minimalistic design and it would be impossible to pack all the features necessary for online shopping on a single page.

Besides, as we mentioned before, SPAs cannot cope with high loads ‒ which is customary for a multi-vendor platform. So, online marketplaces with multiple features and images can only be multi-page apps.

• SEO is important for your project

For a website that is solely for local use (like a CRM or project management tool), social media, or apps distributed via Apple or Google markets, SEO is of no importance. But most web projects are public (eCommerce websites, news sites, review platforms, and blogs) so they depend on high visibility and ranking in the search engines.

• You anticipate significant expansion of your platform

Constant adding a smattering of elements (sections, buttons, widgets) on a single page app will clutter the interface and increase the loading time. With an MPA, you can simply create a new page for a new category or product that will organically integrate with the rest of the site.

Here are the live examples of MPA: Amazon, eBay, Aliexpress, Forbes, Thumbtack, Angi

When to Build an SPA?

A single-page web application design is perfect when:

• You need a landing page

An SPA will seamlessly navigate customers through the site and will allow them to make a purchase quickly and easily.

• Your app is meant for inner usage

Trello and Gmail are designed to help their users (individuals and teams) automate part of their daily grind whether it consists of scheduling, planning, emailing, sharing documents, or video conferencing. Such apps can survive without SEO. SPAs are wonderful for such SaaS solutions.

• You need to develop and launch a simple app as soon as possible

SPA development implies less coding. Therefore it is much faster and less expensive ‒ ideal for startups.

• Your web app will be used primarily on smartphones

SPAs are perfect for mobiles as they look and feel like practically native iOS and Android apps. So, SPA will be good for media and blogging apps that need to be attractive and easy to use.

• Work in offline mode matters

Because SPAs load most of the content at the very beginning, a sudden interruption of Internet service will not affect the page and users will not see a blank screen as well as will not lose all their progress. SPAs continue to use previously loaded information.

Here are the most famous SPAs: Facebook news feed, Twitter, Trello, Pinterest, Gmail, Google Maps, Airbnb.

Do you need an SPA? Let’s move to the next step — SPA development.

How to Build a Single-Page Application

To create an SPA, you will need a team of developers. The best team consists of a:

• UX/UI designer
• Front-end developer experienced in Javascript and its frameworks
• Back-end developer who writes code in PHP, C#, or another programming language
• QA engineer to test the application in the final stage
• Project Manager who will coordinate the development process
• Business Analyst at the Discovery stage, if necessary.

Having a complete team allows you to focus on your business and marketing tasks and leave the technical part to the specialists.

The development of an SPA consists of the same steps as other web projects:

1. Discovery phase

For starters, you should thoroughly research the market needs, analyze the competitive landscape, identify your target audience, outline the value proposition, and establish the goal of your application. Your solution should solve a specific problem of the selected niche, and be competitive among other apps. After outlining the business idea, you can start visualizing your app with mockups and wireframes. With these established, it’s easier to write the requirements that are gathered and structured in SRS (Software requirements specifications). Using this document, the team can get a feel for the connections between different entities. You can complete this phase yourself or hire a Business Analyst.

2. Get a design

The main goal of an SPA is to improve the user experience. Unlike traditional applications, SPA web design should present all information on one page which is similar to a mobile app’s UX. The task of a designer is to thoroughly consider the usability and location of all the UI elements. Since the developer has to rely on design to make its element working, design always precedes development.

3. Development

The web development of an SPA is much faster than building an MPA because it requires less server-side work, and it’s streamlined using JS frameworks. Usually, we create single-page applications with VueJS or React frameworks. Fundamentally, though, the best framework is the one that your SPA developer is experienced with and knows well.

4. QA testing

After the bulk of the coding is done, QA engineers check the compatibility between the ready app and the requirements to make sure everything is functioning correctly. If bugs are found, they are reported to developers and fixed.

5. Launch and maintenance

When the application passes inspection by the QA team, we can push your app online. After-launch time, we do not leave our clients alone, providing all necessary functionality improvements, security checking, and code updates.

At Greenice, we provide a turn-key service guiding you through all the necessary stages — from discovery, to launch, to maintenance. But you can also get in touch with us at any stage.

Our Experience with SPA Development

We’ve been developing web applications since 2007. During this time, we’ve built and released many custom applications — both SPAs and MPAs. Here are our most recent projects:

Project 1: Microblogging platform

We created an SPA for a client in the Netherlands. The aim of the app is to use voting to collect statistics on different topics. We created a swipe feature that users love. The app is minimalistic and feels like a native app. Under the hood, however, there are complicated algorithms of data analysis.

Project 2: Digital ID checker

For a US-based client, we created an app that serves as ID control for entering a university or an organization. After building it specifically for their own use, our clients decided to convert it into a SaaS that can be used by other organizations and events.

The app is used instead of a physical ID for convenience and increased security. The user profile (photo and name) and a barcode allow entrance to the building. A screenshot protection system does not allow unauthorized people to use the ID. Recently we added a Covid-19 questionnaire. Once a day, all users have to answer health questions prior to their visit. If they report any symptoms, their account is blocked and they are not allowed to enter the building.

How to apply this to your project

An SPA is a modern and quickly evolving development method. However, it has not replaced traditional multi-page applications. Its drawbacks are critical for some projects but are insignificant for others.

• If you need a simple, mobile-friendly, feature-rich application that does not need SEO, you can securely go with an SPA. Its minimal back-end allows for quicker and cheaper development.
• If you are aiming to create a multicategory platform that needs to be highly ranked in search engines, and processes tons of data, we recommend you build a traditional multi-page application.

The fact remains that each case is individual and we can’t know for sure if an SPA or an MPA is needed without seeing all the requirements. Don’t forget that we can offset many inconveniences of SPA software development with the help of modern technologies. We'll be happy to create a one-of-a-kind SPA for you!