We are doing this technology because it's the future. We can build incredibly fast sites with a seamless user experience regardless of device. You don't have the limitations you can get with an MPA where you have to do everything on the server.
We are doing this technology because it's the future. We can build incredibly fast sites with a seamless user experience regardless of device. You don't have the limitations you can get with an MPA where you have to do everything on the server.
The difference between Multi-Page Application and Single Page Application
Since the 90s, the standard structure for a website has been a Multi-Page Application. In the mid-2010s, the new technology with Single Page Application was introduced, which is now the foundation for all of Webbhuset's dynamic e‑commerce solutions.
The structure of a website
Simply put, a website is built from the building blocks of HTML, CSS, and Javascript, which consist of code. HTML forms the structure and content of the page, while CSS and Javascript control the appearance and behavior. The browser reads the code and renders the interface, which is all the content you see on the page, such as images, texts, and buttons. Each page has a unique web address (URL), and these are rendered by different HTML files that the browser fetches from the server. When you visit a category page, it consists of an HTML file, and when you later click on a product, the browser fetches a new HTML file with the product page's content. This has been the standard structure of a website since the 90s and is called a Multi-Page Application (MPA).
“If you grew up in the 90s, you might remember it took 1 minute to load a new page. You clicked on a link and it took ages to load, so much has changed since then,” says Albert Dahlin, CTO at Webbhuset.
Screenshot of Webbhuset's homepage in the inspect mode. In the code, you can see how the website is built with HTML and CSS that control the appearance and structure of the website.
Development to Single Page Application (SPA)
Over time, a new technology was developed, Single Page Application (SPA), where instead of fetching new HTML files for every new link, you only fetch an HTML file with a lot of Javascript. When you click on a link in an SPA, Javascript and code that already exists in the original HTML file, which was fetched at the first visit to the site, is used.
The content of a website often consists of a menu, header, footer, and the central content. Usually, only the central content is replaced when navigating to new pages, while the menu, header, and footer remain unchanged.
“Say you are on an e‑commerce site and navigate between category pages and different product pages. You might look at 10 different products before deciding which product you want to buy. With an SPA, you don't have to fetch the category page every time you go back, because all product cards are already loaded with Javascript. This allows you to build a much faster experience with an SPA solution, as you don't need to fetch new HTML files with each new page load,” says Albert.
In an SPA, only the middle content is fetched with Javascript every time you change pages.
Pure SPA
Simplified, you could say that it is with these two categories, MPA and SPA, that you build in a technical manner. Then there are solutions that are a mix or hybrids of these two. Everyone also has slightly different definitions of what an SPA is.
“What we describe, I think, is a pure SPA. Some say they have an SPA, but then it's a sort of hybrid. This may be due to people making some sort of mixture out of ignorance that is neither the one nor the other, or they call it an SPA because they think it sounds cool,” says Albert.
A simplified figure of a typical MPA. With each link click, an HTTP request is sent to the server, which responds with a new HTML file, and the browser renders the page.
A simplified figure of a typical SPA. During the first page load, an HTTP request is sent to the server, which responds with an HTML file for the entire site. With each following link click, only Javascript is fetched, and the browser replaces the missing content.
SPA solutions: The future of e‑commerce solutions
At Webbhuset, we started making SPA solutions around 2017. SPA has been around since the mid-2010s, and in 2017, very few were building websites that way because the browsers didn't support it very well. Around 2017, it started working in most browsers, and then Webbhuset was very early on.
“We are doing this technology because it's the future. We can build incredibly fast sites with a seamless user experience regardless of device. You don't have the limitations you can get with an MPA where you have to do everything on the server,” explains Albert.
Success story SnusMe as an example
A good example of a pure and well-built SPA is SnusMe. When we rebuilt SnusMe's e‑commerce site, we took the SPA solution a step further. SnusMe's SPA solution fetches all products for the entire site already during the first page load.
“SnusMe's e‑commerce has around 1,000 products, and it's about the same number of kilobytes as downloading an image. It is so fast to fetch 1,000 products that when you click around on the site, you don't have to fetch anything from the server. You can click between products, the category page, and add to the cart without even asking the server,” says Albert.
Advantages of an SPA solution
Renders in the browser instead of the server
Today, different designs, layouts, and interfaces are often desired depending on whether you're on a desktop or a mobile, and thus there are different HTML files for desktop and mobile. The problem with rendering HTML on the server is that the server doesn't know how big the screen is.
“It's the computer that knows how big the screen is or how big the open window is. You can have a small window on a large screen or three windows next to each other. The advantage of SPA is that the actual rendering of the layout and interface is done in the browser, which knows how big the screen is. The browser can render a hamburger menu for mobile and a hover menu on desktop,” explains Albert.
Fast site regardless of coverage
For example, if you are on a train and lose coverage on a site with an SPA solution, you will still be able to click around between the pages you have already visited because they have already been downloaded. You can test this by enabling slow 3G in the inspect mode, and you will notice a marked difference in speed in a well-built SPA solution like SnusMe, compared to an MPA solution.
“In an MPA, it must fetch the HTML file for every page you click on. If it takes 10 seconds with poor 3G, you will go crazy every time you click on something,” says Albert.
With an SPA solution like SnusMe, you can browse through the entire product catalog without the internet, and you can also add products to the cart. However, this should not be mistaken for a progressive web application (PWA) where you can do everything offline. If you reload the page in an SPA without the internet, it will no longer work.
“One could say it's like an app, and that's the future. This is how you want to build websites, and it wasn't possible to do 10-15 years ago. There was no technology for the browser to do this,” says Albert.
Since 2017, Webbhuset has only built SPA solutions because of all its advantages, as well as because it is a technology for future-proof e‑commerce.
FAQ on Single Page Application
Here are some common questions and answers about Single Page Application:
What is the difference between a Single Page Application (SPA) and a Multi-Page Application (MPA)?
SPA: Initially loads a single HTML file and updates content dynamically without reloading the entire page. This provides a faster and more interactive user experience.
MPA: Consists of multiple HTML files where each page load requires a new request to the server to fetch a new HTML file. Each navigation between pages means a full page load.
What are the advantages of an SPA?
Faster navigation and better user experience since only parts of the page are updated.
Better handling of cache and reduced server load.
Offline mode capability with the help of service workers.
Can you have an SPA solution regardless of the e‑commerce platform?
Yes, you can implement an SPA solution on virtually any e‑commerce platform. At Webbhuset, we specialize in customized e‑commerce solutions and can help you implement an effective SPA solution regardless of the platform you use.
Want to Learn more?
Fill out the form, and we will contact you shortly.
