After the first appearance in 2003, Single Page Applications(SPA) have changed a lot and has got an immense growth over time. SPAs are not only limited to the websites, rather proves a healthy idea for commercial applications. Every technology comes along with its own pros and cons. Same is the case with the SPAs which is considered good for the application that does not require to be highly revered by search engines and need not pay attention to crawlers whereas the SPAs like angular websites are very hard practically for search engine optimization. Here is a quick introduction to the SPA, which will guide you to make a definite choice between SPA or non-SPA.

What is Single Page Application

In simple terms, the SPAs are the application that is made over the single page and uses the dynamic rewriting process for rendering the content to the users. These web pages are different from loading the pre-rendered content and removes the overload of rendering the HTML pages to the client. This is how it works:

• When the browser makes the first request, the server sends back index.html. This is the only transaction where an HTML file is returned.
• HTML file comes with script tag for javascript file that takes control of HTML page.
• The next request is made by asynchronous javascript and rendered in json format. Which negates the need of reloading the page.

Pros of SPAs

SPAs not only lures due to the simple fluid navigation but also brings a number of benefits, which are as following:

• The traditional HTML pages take a load of time while moving to and fro the server. This required the reloading of the heavy amount of similar data, whereas the new SPA mitigates the need for communication with HTML tags to the server. SPA loads once only with the HTML tags while the next requests are made on the partial loading of the page using AJAX and JSON. This results in the saving of bandwidth.
• The SPA page becomes faster and requires less bandwidth due to the less data transaction. The page design and UX become better and work amazingly with the slow connections.
• For the fear of javascript size being bloated, the good SPA uses code splitting. It keeps the bundle size and performs on-demand loading.
• The developer can work separately over the view layer and application layer. The presentation layer and application are decoupled by the JSON data and the developer can recode the application logic without affecting the HTML markups. This way the client and server stay independent of each other.
• The most obvious benefit is the easiness of deploying the app. You end with the single .html file, .css bundle and .js bundle.

Cons of SPAs

SPAs are not suitable for every single project and also has its limitation as follows:

1- Heavy loading time

Sometimes the SPA takes a lot of time in loading the bundle of CSS and Javascript which delays the first loading of the page. Sometimes the delay is too much which pushes users to leave the app. For solving this upto an extent, either bring a lighter version for the slow connection or encourage users for not reloading the page.

2- SEO Becomes Hard

The traditional HTML pages are good for the SEO whereas the SPA becomes hard to be crawled by the users because the indexing robots do not know how to deal with the javascript. The solution is to code the robot specific HTML page which again can lead to the maintenance issues.

3- Statistics are not Supported

Again a hard task for marketers, the SPA does not support statistics. The reason is that the tools are made to read the impression over the completed page load. The app refreshes the content and reloads partially on the basis of user’s action with no transaction of HTML. This way tools can’t read the HTML reloaded content and marketers have to devise a new option for monitoring tool by keeping the server in the loop.

4- Navigation goes wrong with Bad SPAs

The bad SPAs comes out problematic in navigation. Here the user thinks that he is on the new page whereas the URL bar shows the same URL. As the user tries to move to the previous page, either nothing happens or he is redirected to the previously surfed website which results in the loss of information to the SPA page when returning again. Although a good developer knows to avoid the glitch and works out over the pseudo-history management. The beforeunload javascript event also used to warn the user for risk of data loss to users.

Conclusion:

The use of traditional method or SPA strictly depends upon the user’s needs. The criticism level of SPA is based upon the preference of the developer and complexity of the project. Almost maximum cons of SPAs are associated with the marketing whereas, for the application demanding partial loading and fluid navigation, it comes out best. Look at the use case and choose the best as per the long term goals.