Kunskapshuset | Vad är Single Page Application?

Uppbyggnaden av en hemsida

Enkelt förklarat kan man säga att en hemsida är uppbyggd av grundstenarna HTML, CSS och Javascript som består av kod. HTML utgör strukturen och innehållet på sidan, medan CSS och Javascript styr utseendet och beteendet. Webbläsaren läser av koden och ritar upp gränssnittet som är allt innehåll man ser på sidan såsom bilder, texter och knappar. Varje sida har en unik webbadress (URL) och dessa ritas upp av olika HTML-filer som webbläsaren hämtar från servern. Besöker man en kategorisida så består den av en HTML-fil och när man sedan klickar in på en produkt så hämtar webbläsaren en ny HTML-fil med produktsidans innehåll. Detta har varit standard-uppbyggnaden av en hemsida sedan 90-talet och kallas för Multi-Page Application (MPA).

“Om man växte upp på 90-talet så kommer man kanske ihåg att det tog 1 minut att hämta en ny sida. Man klickade på en länk och så stod det och laddade, så det har hänt mycket sedan dess.” berättar Albert Dahlin, CTO på Webbhuset.

Utvecklingen till Single Page Application (SPA)

Med tiden utvecklades en ny teknik, Single Page Application (SPA), där man istället för att hämta nya HTML-filer för varje ny länk, endast hämtar en HTML-fil med massa Javascript. Klickar man på en länk i en SPA används Javascript och kod som redan finns i den ursprungliga HTML-filen som hämtats vid första besöket på sajten.

Innehållet på en hemsida består ofta av en meny, header, footer och det centrala innehållet. Vanligtvis byts endast det centrala innehållet ut vid navigering till nya sidor, medan menyn, headern och footern förblir oförändrade.

“Säg att man är inne på en e-handel och klickar sig fram mellan kategorisida och olika produktsidor. Man kanske kollar på 10 olika produkter innan man bestämmer sig för vilken produkt man vill köpa. Med en SPA behöver man inte hämta kategorisidan varje gång man går tillbaka, för alla produktkort finns redan inlästa med Javascript. Detta gör att man kan bygga en mycket snabbare upplevelse med en SPA-lösning, eftersom man inte behöver hämta nya HTML-filer vid varje ny sidhämtning.” berättar Albert.

Renodlad SPA

Förenklat kan man säga att det är med dessa två kategorier, MPA och SPA, som man bygger på tekniskt sätt. Sedan finns det lösningar som är ett mellanting eller hybrider av dessa två. Alla har även lite olika definitioner av vad en SPA är.

“Det som vi beskriver tycker jag är en renodlad SPA. Vissa säger att de har en SPA, men så är det en sorts hybrid. Detta kan bero på att folk av okunskap gör någon mellanting som varken är det ena eller det andra, eller att man kallar det för SPA för man tycker det låter coolt.” säger Albert.

SPA-lösningar: Framtidens e-handelslösning

På Webbhuset började man göra SPA-lösningar runt 2017. SPA har funnits sedan mitten av 2010-talet och 2017 var det väldigt få som byggde hemsidor på det sättet, därför att webbläsarna inte hade särskilt bra stöd för det. Runt 2017 började det funka i de flesta webbläsare och då var Webbhuset väldigt tidigt ute.

“Vi gör den här tekniken för att det är framtiden. Vi kan bygga otroligt snabba sajter med en sömlös användarupplevelse oavsett enhet. Man har ju inga begränsningar såsom man kan få med en MPA där man måste göra allt på servern.” förklarar Albert.

Kundcaset SnusMe som exempel

Ett bra exempel på en renodlad och välbyggd SPA är SnusMe. När vi byggde om SnusMe:s e-handelssajt tog vi SPA-lösningen steget längre. SnusMe:s SPA-lösning hämtar in alla produkter för hela sajten redan vid första sidhämtning.

“SnusMe:s e-handel har runt 1 000 produkter och det är ungefär lika många kilobite som att ladda ner en bild. Det går så fort att hämta 1 000 produkter så när man klickar runt på sajten så behöver man inte hämta någonting på servern. Man kan klicka mellan produkter, kategorisidan och lägga i varukorgen och vi behöver inte ens fråga servern.” säger Albert.

Fördelar med en SPA-lösning

Renderar i webbläsaren istället för servern

Idag vill man ofta ha olika design, layout och gränssnitt beroende på om det är en desktop eller mobil man är inne på och då har man olika HTML-filer för desktop och mobil. Problemet med att rendera (rita upp) HTML på servern är att servern inte vet hur stor skärm man har.

“Det är datorn som vet hur stor skärm den har eller hur stort fönster som är öppet. Man kan ha ett litet fönster på en stor skärm eller tre fönster bredvid varandra. Fördelen med SPA är att själva utritningen av layouten och gränssnittet görs i webbläsaren som vet hur stor skärmen är. Webbläsaren kan alltså rendera en hamburgare-meny till mobil och en hoover-meny på desktop.” förklarar Albert.

Snabb sajt oavsett täckning

Sitter man exempelvis på tåget och tappar täckningen på en sajt med SPA-lösning, så kommer man fortfarande kunna klicka runt mellan de sidor man redan varit inne på eftersom de redan har hämtats. Detta kan man testa om man sätter på slow 3G i inspektera-läget och man märker en markant skillnad i hastigheten på en välbyggd SPA-lösning såsom SnusMe, kontra en MPA-lösning.

“I en MPA måste den hämta HTML-filen för varje sida man klickar in på. Tar det då 10 sekunder med dåligt 3G då blir du galen varje gång du klickar på något.” berättar Albert.

Med en SPA-lösning som SnusMe kan man dock kolla runt i hela produktkatalogen utan internet och man kan även lägga produkter i varukorgen. Detta ska dock inte misstas för en Progressive Web Application (PWA) där man kan göra allt offline. Laddar man om sidan i en SPA utan internet kommer den inte längre funka.

“Man kan säga att det är som en app och det är ju framtiden. Det är såhär man vill bygga hemsidor och detta gick ju inte att göra för 10-15 år sedan. Det fanns ingen teknik för att webbläsaren skulle göra detta.” säger Albert.

Sedan 2017 har Webbhuset endast byggt SPA-lösningar på grund av alla dess fördelar, samt för att det är en teknik för en framtidssäker e-handel.

Vad är skillnaden mellan en Single Page Application (SPA) och en Multi-Page Application (MPA)?

Vilka är fördelarna med en SPA?

Kan man ha en SPA-lösning oavsett e-handelsplattform?

B2B/B2C
Posterys kliv till AI-native e-handel med Fusion Commerce
B2C
Långsiktiga tekniska val banar väg för Doorlys tillväxt
B2B
Luna förenklar återförsäljarnas e-handel med konceptet Toolshop
B2B
Ninolab möter generationsskiftet med ny webbshop i Fusion Storefront
B2B/B2C
Skräddarsytt CRM gav Newbody 360-vy över hela sin försäljningsresa

Skillnaden mellan Multi-Page Application och Single Page Application