At first, I was baffled when I heard about SPA i.e. Single Page Application. I was like – huh – who builds a one-page website these days. But after reading up further, I realized SPA is a very sophisticated way to build web applications that are fast and consume lower bandwidth.
What is SPA?
Single Page Application is a web application or website that renders a single page and later on modifies parts of the page as per user interaction without refreshing the entire page. Since the page doesn’t refresh completely, the user gets a feel to have an entire application on a single page and hence the name.
How does it work?
As with every new thing, SPA has its own advantages and disadvantages.
The primary advantage of SPA is Speed – Most of the page is already loaded and hence the remaining interactions appear to be very fast. Additionally, only data is exchanged between client and server i.e. no overhead of HTML tags. This makes data transfer economic and faster.
However, this architecture also poses few challenges too.
Challenges faced by SPA
- Browser History – As you can imagine, browser history doesn’t get updated as the user never leaves the page. As a result, if the user presses browser back button, she is likely to leave the page and go to the previous website altogether. This could be addressed by updating browser history using JS or using HTML5 specs – pushState and replaceState to programmatically modifying the URL and history.
- Analytics – many of the analytics tools rely heavily on page loads to understand and measure user behavior. Since the page never loads completely again, the developers need to call the relevant analytics functions deliberately.