What is a Single Page Application?

Sometimes names in Software Development are not well chosen, and that can lead to a lot of confusion. That is certainly not the case with the term SPA: a single page application literally has only one page !! 😊

If you have ever used a web application that is constantly reloading everything from the server on almost every user interaction, you will know that that type of application gives a poor user experience due to:

  • the constant full page reloads
  • also due to the network back and forth trips to the server to fetch all that HTML.

In a single page application, we have solved this problem, by using a fundamentally different architectural approach:

On a SPA, after the initial page load, no more HTML gets sent over the network. Instead, only data gets requested from the server (or sent to the server by JSON). So while a SPA is running, only data gets sent over the wire, which takes a lot less time and bandwidth than constantly sending HTML. HTML version would be much larger in size when compared to a plain JSON object due to all the opening and closing tags, but also there is a lot of duplicate HTML if we constantly loading similar pages over and over.

For example, things like the headers and the footers of a page are constantly being sent to the browser but they have not really changed. The big advantage of a single page application: a much-improved user experience due to less full page reloads and a better overall performance because less bandwidth is needed.

How Do Single Page Application Even Work?

Indeed, how can they work because we only loaded very little HTML from the server? Once the application is started, only data goes over the wire. So how does the new HTML come from?

Because there has got to be new HTML being generated somewhere, as it’s the only way that the browser will change what it’s displaying, right?

The answer is simple, and it has to do with the way that single page applications actually work when compared to traditional server-based applications.

On a traditional application (which includes the vast majority of today’s public Internet), the data to HTML transformation (or rendering) is being done on the server side.

On the other hand, Single page applications do it in a much different way:

In a SPA after application startup, the data to HTML transformation process has been moved from the server to the client – SPAs have the equivalent of a template engine running in your browser!

And so with this information in hand, let’s wrap up this section by summarizing the key points about single page applications.

Advantages of SPAs and the Key Concept About How They Work

Building our application as a SPA will give us a significant number of benefits:

  • We will be able to bring a much-improved experience to the user
  • The application will feel faster because less bandwidth is being used, and no full page refreshes are occurring as the user navigates through the application
  • The application will be much easier to deploy in production, at least certainly the client part: all we need is a static server to serve a minimum of 3 files: our single page index.html, a CSS bundle, and a Javascript bundle.
  • We can also split the bundles into multiple parts if needed using code splitting.
  • The frontend part of the application is very simple to version in production, allowing for simplified deployment and rollbacks to previous version of the frontend if needed

The Way SPAs Work

The way that single page applications bring these benefits is linked to the way that they work internally:

  • After the startup, only data gets sent over the wire as a JSON payload or some other format. But no HTML or CSS gets sent anymore over the wire after the application is running.

The key point to understand how single page applications work is the following:

instead of converting data to HTML on the server and then send it over the wire, in a SPA we have now moved that conversion process from the server to the client.

The conversion happens last second on the client side, which allow us to give a much improved user experience to the user.