In the near past, the web browser was much less capable than today. Every page was coming from a server.

Then the first true SPA arrived as Angular.js, brought together with all these disparate ideas in 2010. Two — way data binding, Client — side MVC, templates, and dependency injection in one framework, there were the main significant solutions provide by Angular.js at that time.These were the beginning of a new era of Single page applications.

there are two main design patterns for web apps: multi — page application(MPA) and single — page application(SPA).

A single — page application(SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.

examples: Gmail, Google Maps, Facebook, Twitter, Google Drive, Pinterest, Twitch, Uber, Apple, PayPal, Autodesk, Tesla, Skype.

Single Page Application Frameworks

AngularJS, ReactJS, Backbone, EmberJS, MeteorJS, PolymerJS, Aurelia, Vue, Mithril.js, Node.js, etc.

In an entire lifespan of a SPA application, most of the resources(HTML + CSS + Scripts) are only loaded once.Therefore, only the data is transmitted back and forth.

SPA can cache any local storage effectively.An application sends only one request, store all data, then it can use this data and works even offline.

Every change eg.display the data or submit data back to server requests rendering a new page from the server in the browser.

How does a Single Page Application Work ?

Single Page Applications are uses HTML5 and Ajax to create a web page.This thing ensures a smooth responsive web page, as well as the constant page, reloads by its own.SPA uses JavaScript to carry out the maximum number of processing to the client side.Once the page is fully loaded with HTML & JavaScript code, all the subsequent updates are carried out through AJAX calls.After then the data is loaded by using the API call JSON from the server.This data is then updated on the web page without reloading which confirms the best user experience by SPA.

With just one request to the server Single Page Applications can be cached to the local storage.By this SPA provides offline support to the user.Also, this request caches all the data incoming to the application from the server.

What are the Drawback of Single Page Applications ?

Single page applications are operated on JavaScript and download data on request from the client side that’s the reason for providing poor SEO optimization by SPA.

MPA scores over SPA in terms of SEO.

SPA doesn’t provide browsing history support.

Single-Page Application

A single-page application is an app that works inside a browser and does not require page reloading during use.

You are using this type of applications every day. These are, for instance: Gmail, Google Maps, Facebook or GitHub.

It is just one web page that you visit which then loads all other content using JavaScript — which they heavily depend on.

Pros of the Single-Page Application:

  • SPA is fast, as most resources (HTML+CSS+Scripts) are only loaded once throughout the lifespan of application. Only data is transmitted back and forth.
  • The development is simplified and streamlined. There is no need to write code to render pages on the server.
  • SPA can cache any local storage effectively. An application sends only one request, store all data, then it can use this data and works even offline.
  • SPAs are easy to debug with Chrome, as you can monitor network operations, investigate page elements and data associated with it.
  • It’s easier to make a mobile application because the developer can reuse the same backend code for web application and native mobile application.

Cons of the Single-Page Application:

  • It is very tricky and not an easy task to make SEO optimization of a Single-Page Application.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anil Kumar

Anil Kumar

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.