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?
A typical SPA uses various different technologies ranging from AJAX (Asynchronous Javascript And XML) to JS frameworks (Angular, Ember.js, React etc) to WebSockets to SSE (Server side events). When any user interaction happens, an AJAX request is triggered to fetch response from the server. The response typically contains only data and not entire HTML. The data (JSON, XML etc) is then used to update the portions of the webpage. If there are certain sections of the page which need to be modified without user interaction, WebSockets or SSE are used to receive data from the server asynchronously. While the sections of the page are getting updated, the URL of the page remains the same which confirms the user bias that it is a single application.
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
- SEO – Since the URL doesn’t change, SPA faces challenges in achieving the SEO rankings. Search engines such as Google have had problems in crawling websites which use Javascript. As suggested in this section on Wikipedia, there are ways to circumvent this problem.
- 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.
Related Links
Related Keywords
Angular JS, React JS, Ember.js, Vue.js, AJAX, SSE, WebSockets