What Is an SPA?

What is an SPA?

In the early days of web development, it was fairly simple. A developer wrote a form using HTML that sent requests to a server, and based on the form content, redirected them to another page.

At some point, people decided that the whole "page refresh" experience was tedious for the user and started coming up with possible solutions. By far, the most popular of these is the modern Javascript framework (React, Vue, Svelte, Angular) and the Single Page Application (SPA) structure.

Why use an SPA?

In an SPA, instead of an HTML form sending data to a server and then redirecting to a new page, javascript sends the form data to a server, recieves data back, and re-renders part of the page without refreshing the page. So the user gets to stay on one page and not deal with a refresh and the page feels fast and snappy.

It's because of these modern javascript frameworks that developers can create insanely powerful software in the browser like Figma (the design tool our team uses) and Clickup (the task management software we use). Software with that kind of complexity is just not possible using a traditional server rendendered approach.

What are the downsides of an SPA?

But a single page application has it's downsides:

First, a page that is rendered by javascript on the fly is usually not searchable by Google and other search engines. Which means content inside of SPAs doesn't get promoted on search engines and doesn't come up in organic searches.

Second, what seems like a page on an SPA is actually just one of a number of possible frames living in a single page, because of this SPA pages often don't have an address like a URL that is easy to share with others.

Third, keeping track of data on an SPA can be complicated. Developers have to come up with different patterns for handling the data changes and these can sometimes lead to confusion and bugs.

Fourth, adding to the complication, data still has to be processed and stored using a server. So by using an SPA you are not escaping writing code for a server (known as backend code.) The server is just configured to send data back to the page, rather than redirect to a new page. This creates two different codebases that have to be maintained.

Are there any alternatives to an SPA?

There are alternatives to using an SPA, they just aren't as popular and have their limits:

  • Traditional javascript (without a framework) is powerful enough to handle most light tasks fairly easily.
  • Some developers choose to use javascript frameworks, but only allow them access to a very small part of their page for added functionality.
  • Ultralight frameworks like Alpine.js take the best parts of popular javascript frameworks and allow you to use them easily on a normal server rendered page.
  • There are a few experimental backend frameworks like Laravel Livewire that let users add SPA-like functionality to a server rendered website using zero javascript.

I've found use cases for all of these alternatives—especially when the functionality I need is very limited. As much as I dislike Single Page Application frameworks, and as much as I want to see some of these alternatives succeed, our team still reaches for them 90%.

So when should you use an SPA?

There are several cases where it just makes sense to use an SPA framework:

  • If you know your app is going to need a native app (iPhone, Android) you should probably just use an SPA framework.
  • If you want to run your web app as a native app on Mac, Linux or Windows using electron, an SPA framework will help you.
  • If the app you are running is fairly complex (more than just a few forms and buttons) then you might want to consider an SPA framework.

Conclusion

Single Page Application frameworks offer a big leap forward in what developers can do with web technology. While they offer amazing functionality, that functionality comes with complexity and a loss of some of the the things web technology does right. Unfortunately, for many modern web apps, there is no good alternative.

At some point, people decided that the whole "page refresh" experience was tedious for the user and started coming up with possible solutions.  By far the most popular of these is the modern Javascript framework (React, Vue, Svelte, Angular) and the Single Page Application (SPA) structure.

Receive great content updates from our team to your inbox.

Subscribe and Get our FREE eBook Guide to Planning Your Software Project