The original address

SPAs are ubiquitous, but still a controversial topic among web developers.

Single-page Web applications have come a long way since they first appeared around 2003. They have become an integral part of the modern JavaScript landscape.

But in my discussions with a number of developers, it seems to me that the actual workings of a single-page application are still unclear. So I decided to roll up my sleeves (figuratively speaking) and offer my thoughts on this very interesting subject.

So, let’s start at the beginning.

what are single page applications?

The best definition, in my opinion, is that a single-page application is a Web application that requires only a single page to be loaded into a browser.

You might be wondering, what exactly does that mean? How can a single page application be useful to anyone in the world?

The answer is simple. Single-page Web applications are built around the concept of dynamically rewriting the content of that single page. This is not the same as loading the pre-rendered page from the server.

This is where the magic happens. In this way, a single-page Web application avoids the interruptions that occur when pages are rendered on the server. This eliminates one of the biggest problems the Web development world often faces in providing a seamless user experience.

How a single page application works

In a single-page Web application, when the browser makes the first request to the server, the server sends back the index.html file. That’s basically it. That’s the only time HTML files are available. The HTML file has a script tag for the.js file that will control the index.html page. All subsequent calls simply return data, usually in JSON format. The application uses this JSON data to dynamically update the page. However, the page never reloads.

Once the application is started, the client, not the server, handles the job of converting the data to HTML. Basically, most modern SPA frameworks have a template engine that runs in the browser to generate HTML.

Contrast this with a traditional Web application. In a traditional application, the server renders the entire HTML page every time the application calls the server. The client receives the rendered page and triggers a page refresh. In this case, the browser is the client.

The following diagram illustrates the difference between the two approaches:

Advantages of single-page apps

Obviously, since we won’t be sending any HTML over the network for every user interaction, we can save a lot of time and bandwidth. The HTML version is usually larger due to various start and end tags. Also, in the traditional way, we would load a lot of duplicate HTML every time we made a request to the server. By following the SPA approach, the application becomes more sensitive.

No guesswork, faster data refreshes and less bandwidth consumption will result in a better user experience. This is useful on mobile devices and slow Internet connections.

There are some arguments against single-page Web applications that the size of JavaScript packages can become bloated. However, most good SPA frameworks provide a good way to split the code. This allows you to control the size of your packages and perform on-demand loading where applicable.

A less obvious benefit is the overall architecture of single-page applications. Sending application data using JSON creates a separation between the view layer (HTML) and the application layer. This decouples the presentation layer from the application layer and allows developers to evolve each layer independently. You can replace HTML tags without changing the application logic. The client and server are also completely independent.

Another overlooked benefit is the production deployment of single-page applications. Single-page applications are very easy to deploy. When you build a SPA for production, you typically get an HTML file, a CSS package, and a JavaScript package. Any static content server can host these files. Good examples are Nginx, Amazon S3 bucket, Apache, or Firebase.

Disadvantages of single-page apps

One of the biggest drawbacks of single-page Web applications is that they cannot be properly indexed by search engines like Google. Because there are no HTML tags other than the initial index.html file, search engines cannot index the content because their crawlers cannot execute the JavaScript used to generate HTML.

However, in the official announcement, Google stated that their search engine is now capable of fetching Ajax calls.