Single-page applications: are they worth it?

Katie Collins -

As web developers look for new ways to deliver fast and beautiful web projects, an ever-growing trend has been the implementation of a single-page application framework. But what is a single-page application, and why should you consider them for your next project?

Obviously, a single-page application (or one-page website) is an application or website that is limited to a single page. What that means in theory and function though, is that a website or application is built to re-render its content and/or design without sending a request back to the server for a new HTML page. All of the HTML and CSS required for the entire site interaction is loaded when the application is first launched, and then the page changes and updates as the user interacts with it, without loading any new code. This, in theory, leads to faster navigation and a quicker, smoother user experience – or, at least, it should do.

How do single-page applications work?

With more traditional application and web development, each time a user wants to load a new page, or interact with certain areas of a page, the site needs to send a request back to the server to load the next thing that the user is trying to do. Simplistically, single-page applications can load the desired piece of content or design without having to go back to the server.

In many websites, lots of the data on the page will stay the same as you browse between pages – think headers, footers, menus, etc. The only parts of the page that change are the things a user interacts with. Single-page applications load these parts of the page dynamically with JSON data and AJAX requests. This means that data conversion moves from server-side to client-side, and speeds up website performance.

Why use single-page applications?

Single-page applications are increasing in popularity, particularly among start-ups and tech companies. Some benefits of single-page applications are:

  • Better UX: A more streamlined interface where things only load if they have to will result in an improved user experience.
  • Faster performance: Eliminating requests to the server means “new pages” will load faster, and a user’s journey will be quick and smooth.
  • Simplified deployment: With a minimum of three files to serve (HTML, CSS and JavaScript files), the application’s deployment will be much easier.
  • Cost savings? It obviously depends on implementation, but because single-page applications send fewer server requests, there’s less impact on server resources, which ultimately saves money.

What are the disadvantages of single-page applications?

Although there are many benefits, single-page applications do have their downsides:

  • Unfamiliar usability: This sort of counteracts the general “Better UX” benefit, but if a single-page application is implemented poorly, it can lead to an unfamiliar and frustrating user experience. For example, web users have a certain expectation of what should happen when they click the refresh or back button in their browser. A good single-page application framework can mirror this functionality, but a bad one can lead to users exiting the page completely – and possibly never returning.
  • Unsaved changes: For things like forms that require user input, traditional applications can warn users that they’re about to lose unsaved changes – this is trickier and sometimes impossible with single-page applications.
  • SEO/analytics: Search engine optimisation (SEO) is fiddly with single-page applications, because as far as the crawler is concerned, there is only one page. This makes it hard to figure out what all of that content is trying to rank for. Similarly, in terms of tracking traffic it’s much harder to analyse which users get to which part of the website.
  • Bloated load: Although they give improved performance once the application is up and running, the extra code required to make single-page applications work is going to bloat the initial page load time.

Should you use a single-page application for your web project?

The answer to that question depends on whether the positives of single-page applications outweigh the negatives for your specific project. But just remember, fundamentally, a user doesn’t really care how the interface is coded, rendered, or delivered, they just want it to load fast, and be easy to navigate.

Whichever way you decide to build your web project, you’ll need a fast and reliable way to host it. For all the latest advice on website maintenance, head to our blog. Or for CloudNX, our scalable and reliable next-generation cloud hosting platform, get in touch with our dedicated team.