The opposite of Single Page Application (SPA) is Multiple Page Application (MPA) and is what we know as ordinary web pages. Every click on a link loads a whole new page and everything that comes with it. Google Analytics, CSS files, images, menu, header, footer and more. Even if some resources are cached in the browser, the browser always needs to start from scratch with each page load and interpret all the files over and over again. This, of course, takes time. Time when the user stares at a blank screen or content that jumps around the screen as the page content is interpreted. In many cases, there are also third-party ads that appear long after all other page content is ready, and just when you click on the next page, the content shifts further and you click on something you do not want. Do you recognize it?
One page load
With a Single Page Application, the entire page is loaded ONCE. Subsequent clicks to new "pages", or routes as we call them, result in minimal traffic over the network and only data relevant to the route is sent as JSON. Modern JavaScript frameworks, such as React, Vue or Angular, are used to render parts of the page. The page is divided into components which in turn consist of sub-components in several levels. Each component responds differently to changes in the data. When the rendering is complete, the framework is responsible for updating only the nodes on the web page that have been changed, which means that unnecessary blinking is minimized. You then have the right conditions to create a website that feels and behaves like an app.
Unfortunately, not many e-commerce platforms have kept up with this development. From the perspective of the browser and the visitor, approximately the same technology is actually used as 20 years ago, even though today we have more advanced underlying technology. During this time, users have received smart phones and apps with lightning-fast performance where the user experience has come first. There is really no obstacle to demanding the same performance and user experience of a website today, as in a native app.
Improve performance
With a SPA application, new possibilities open up to further speed up the response time and save processing power on the server. Modern browsers have a local database that is unique to each domain called IndexedDB. To further improve the performance of a SPA, you can use it to temporarily store data that would otherwise be needed from the server over and over again. A common user scenario is that the user jumps back and forth between a category page and its product detail pages. With a relatively short cache time of around 20 minutes, you do not have to request the same resource several times during a visit to an e-commerce site. It also makes it possible to display cached data while updating the data in the background, seamlessly for the user.
Progressive Web App
If you want to go one step further and create a Progressive Web App that the user can place on the home screen, the step is not far. This also opens up the possibility of using push notifications just like in a native app, but with the advantage of having one and the same code base to maintain. Since a PWA is on the home screen, it reminds the user that your website exists and if that is not enough, you can proceed cautiously with push notifications with targeted offers.
Headless e-commerce
The best conditions for e-commerce such as Single Page Application are provided with a platform that is "headless", for example Bizzkit, which we at 3bits work with. Headless is a word many have heard but which can be a little difficult to understand what it really means. In short, it can be described as the e-commerce platform does not interfere with how pages are to be presented on the site. A headless e-commerce platform is responsible for storing products, orders, payment methods, etc., in a structured way just like a regular e-commerce platform. But instead of including a website that serves websites, only a REST API is exposed to perform operations against the platform. This gives the freedom to build the website just any way and also opens up the possibility of integrating other systems in a simple way. The same REST API can then be used for a, for example, a native app, shopping via the Google assistant or a customer terminal in a store.
We would like to talk more about Single Page Application and the benefits we see in using the technology for an e-commerce site, get in touch if you want to see a demo of 3bits Blueprint to discover how performance can be improved with SPA.