Introduction to Single Page Application (SPA)
What is Single Page Application
In a more traditional web page architecture, an
index.html page might link to other HTML pages on the server that the browser will download and display from scratch.
How Single Page Application (SPA) Works
So in another word, the HTML5 history API allows us to alter the page's URL without reloading the page and separate URL s for different views.
Once inside the SPA, the application is able to dynamically fetch content from the server through Ajax Request Or Web Sockets.
This allows the browser to keep the current page open while making requests to the server in the background to fetch additional content or new "Pages" altogether.
Static Websites VS Single Page Application (SPA)
To gives, you are an example of the SPA approach in action compared to a traditional approach To understand deeper.
On the left side, we insert an
The new content on the right is served as soon as it's clicked, whereas the one on the left requires fetching the HTML and reloading in the browser.
This provides the best of both worlds: fast initial load times and fast page updates or "reloads". Cool Right?
When to use SPA and When Not?
The most question asked in the world, :) When Should you consider using a single page application? And when not, it is a good idea.
So we must consider in our mind some steps to answer that question.
First, if you'd like a rich interaction between the user and your application, an SPA is almost a necessity.
An application such as Google Maps makes extensive use of this approach to provide real-time view changes as you scroll from one place to another, or click on place markers to view photos of a particular place.
Second, if you want to provide real-time updates on the page, you'll most certainly need to make use of this approach. Notifications, data, streaming, and real-time charts require the use of such an approach.
Should you ever avoid using and SPA?
In another land, if your content is purely static,
introducing and SPA worsens load times for the user, requiring the user to download and execute the
in this article, we saw together the meaning of an SPA and how it works with a Comparison between the SPA and Static Websites, and finally when to use SPA and Wen Not. I hope you enjoy reading this article and don't forget to share it with your friends and subscribe to our newsletter for weekly news and Tech Articles.