Introduction to SPAs

Talks through the world of how traditional websites have come a long way and we work with single page applications now.

We'll cover the following

Single-page applications

The examples of single-page applications that we use every day include Google, Gmail, Facebook, Twitter, and GitHub.

single-page-app

From websites that consisted of several interlinked pages to single-page applications, we have come a long way.

SPAs do not need to download every page every time from the server. They just download the index.html, and the rest happens on the client-side.

You may be thinking that we load very little HTML from the server initially. What about the data that is added later? How does that get updated in a SPA every time? To do this, browsers need to change the data into HTML every time.

The answer to that can be obtained by comparing SPAs to traditional server-based applications. The rendering of data that used to be done on the server-side has a different approach with SPAs.

With SPAs, the data to HTML transformation is done on the client-side. SPA-friendly browsers have something like a template engine running in them that makes rendering much faster and easier. Now, the data won’t need to be loaded from the server every time.

A look at the below diagram might help understanding the concept better.

traditionally…

Multiple page reloads take place every time a new page is requested… How about with SPAs?

with SPAs…

Only request data to display on your single page application with no page reload needed but only AJAX calls to fetch data using HTTP methods.

Advantages of using SPAs

  • Easier to deploy in Production
  • Server to serve a minimum of 3 files — single-page index.html, a CSS bundle, and a JS bundle.
  • Faster page refreshes and no full-page refreshes occur.

Downsides

One major downside of using a SPA is that not all browsers are SPA-friendly. In such cases, they cannot index the SPA correctly. Browsers use AJAX Crawling or Progressive enhancement to solve this problem.

Here is an interesting read about AJAX Crawling that explains what it is and how it can be done: https://developers.google.com/search/docs/ajax-crawling/docs/learn-more

Progressive Enhancement, as per MDN docs: https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement