Let’s begin with – what exactly are Single Page Applications? Basically, these are applications that require only one page to be loaded to the browser. They are built around the concept of dynamically rewriting the content of the single page. This is completely different from loading pre-rendered pages from the server. This approach essentially helps single page applications to avoid interruption caused by rendering the pages on the server and offers a seamless experience to users.

So, how do they work?

When the browser makes the first request to the server, the server sends back the index.html file. And that’s it – that’s the only time an HTML file is served. This HTML file has a script tag for the .js file which takes control of the HTML file. All the subsequent calls just return the data, usually in the JSON format. So, essentially, the application uses the JSON data to update the page dynamically. The client handles the job of transferring data to HTML, unlike the traditional applications where every time an application calls the server, the server will render the entire HTML page and the client triggers a fresh page.

What are the advantages of SPAs?

• Since there is no HTML sent over the network for every user interaction, it saves a lot of bandwidth. It saves a lot of time too.
• With the traditional approach, a lot of duplicate HTML is loaded every time we make a request to the server. With SPA, the application becomes more responsive.
• Faster data refresh and less bandwidth consumption leads to a better user experience.
• SPAs are really useful on mobile devices and slower data connections.
• Most of the SPA frameworks provide methods for code splitting so that the code does not become bloated. This keeps your bundle size in check and also supports on demand loading wherever possible.
• SPAs are super easy to deploy too. Typically, you have one HTML file, one CSS bundle and one JavaScript bundle. Any static content server can host these files.

What about the disadvantages?

Where there are pros, there are bound to be cons too. Here are a few disadvantages we must know about:

There used to be concerns that, since there is no markup except the initial index.html file, search engines cannot index them – however, that is not true anymore, as Google can now crawl AJAX calls too.

So, while single page applications seem quite simple, they could be very useful while building a good user experience as they are fast, and use up less network bandwidth and offer users all the information they need at a glance!