Single-Page Applications (SPA)

You could find hundreds of reading stuffs about the single page application easily from the internet.But for the beginners  who are looking for get a basic idea about what is single page application, I hope you could get an clear idea from this blog. Here I have simply explained the basics of Single Page Application.

• Let see simply what is SPA is..?

SPAs are web applications that load a single HTML page.

• What is mean of "load a single HTML page"..?

That means we dynamically update that page when user interacts with the app.

• How we can dynamically update the page..??

SPAs heavily use AJAX and HTML5 to create responsive Web apps, without constant page reloads. Simlpy it is the way we communicate with back-end servers without doing a full page refresh and get data loaded into our application. That means much of the work (process of rendering pages)  happenns on the client side.

• Why we need SPA over regular website..??

Because in regular web app, every time when the application needs to display the data or need to submit data back to server it has to request a new page from the server and then render it in the web browser.

So why we cannot use this approach..??


With this approach nothing wrong if our application is a simple application. But when we need to create a rich user interface then our page might become very complex and we need to be loaded with lot of data.

Hence in this approach we need to ,

• Generate complex pages on a server.
• Transfer them to the client over internet.
• Render them into the browser.

Because of these reasons it takes rime and degrade the user experience. So now have moved to SPAs with AJAX.

SPA allows refreshing only parts of the page when needs instead of reloading the whole page each time. It helps to improve the user experience since it is the way of reduced amount of pages refreshes. .

From the image I have put below, you could get a better picture in your mind about how SPA and regular app work.

Here are some advantages and disadvantages of SPA.

SPA advantages

• Faster page loading time
• Improved user experience
• Decoupling front-end and back-end 
• No need to write the code to render pages on server.

SPA disadvantages

• Heavy client frameworks which are required to be loaded to the client

I hope you have got a basic understanding about single page application from here.