Vi bruker denne teknologien fordi det er fremtiden. Vi kan bygge utrolig raske nettsteder med en sømløs brukeropplevelse uansett enhet. Du har jo ingen begrensninger slik du kan få med en MPA, der alt må gjøres på serveren.
Vi bruker denne teknologien fordi det er fremtiden. Vi kan bygge utrolig raske nettsteder med en sømløs brukeropplevelse uansett enhet. Du har jo ingen begrensninger slik du kan få med en MPA, der alt må gjøres på serveren.
Forskjellen mellom Multi-Page Application og Single Page Application
Siden 90-tallet har standardstrukturen for et nettsted vært en Multi-Page Application. Midt på 2010-tallet kom den nye teknologien Single Page Application, som i dag er grunnlaget for alle Webbhusets dynamiske netthandelsløsninger.
Hvordan et nettsted er bygget opp
Enkelt forklart er et nettsted bygget opp av grunnsteinene HTML, CSS og Javascript, som består av kode. HTML utgjør strukturen og innholdet på siden, mens CSS og Javascript styrer utseendet og oppførselen. Nettleseren leser koden og tegner opp grensesnittet, altså alt innholdet du ser på siden, som bilder, tekster og knapper. Hver side har en unik nettadresse (URL), og disse tegnes opp av ulike HTML-filer som nettleseren henter fra serveren. Besøker du en kategoriside, består den av én HTML-fil, og når du så klikker deg inn på et produkt, henter nettleseren en ny HTML-fil med innholdet på produktsiden. Dette har vært standardoppbyggingen av et nettsted siden 90-tallet og kalles Multi-Page Application (MPA).
“Vokste du opp på 90-tallet, husker du kanskje at det tok ett minutt å hente en ny side. Du klikket på en lenke, og så sto det bare og lastet, så det har skjedd mye siden da.” forteller Albert Dahlin, CTO i Webbhuset.
Skjermbilde av Webbhusets nettsted i inspiseringsmodus. I koden kan du se hvordan nettstedet er bygget opp med HTML og CSS, som styrer utseendet og oppbyggingen.
Utviklingen mot Single Page Application (SPA)
Med tiden kom en ny teknologi, Single Page Application (SPA), der man i stedet for å hente nye HTML-filer for hver ny lenke bare henter én HTML-fil med mye Javascript. Klikker du på en lenke i en SPA, brukes Javascript og kode som allerede finnes i den opprinnelige HTML-filen som ble hentet ved første besøk på nettstedet.
Innholdet på et nettsted består ofte av en meny, header, footer og hovedinnholdet. Vanligvis byttes bare hovedinnholdet ut når du navigerer til nye sider, mens menyen, headeren og footeren forblir uendret.
“Si at du er inne i en nettbutikk og klikker deg frem og tilbake mellom kategorisiden og ulike produktsider. Kanskje ser du på 10 forskjellige produkter før du bestemmer deg for hvilket du vil kjøpe. Med en SPA trenger du ikke hente kategorisiden hver gang du går tilbake, for alle produktkortene er allerede lastet inn med Javascript. Dermed kan man bygge en mye raskere opplevelse med en SPA-løsning, siden man ikke trenger å hente nye HTML-filer ved hver ny sidevisning.” forteller Albert.
I en SPA er det bare innholdet i midten som hentes med Javascript hver gang du bytter side.
Ren SPA
Forenklet kan man si at det er med disse to kategoriene, MPA og SPA, man bygger teknisk. I tillegg finnes det løsninger som er en mellomting eller hybrider av de to. Alle har også litt ulike definisjoner av hva en SPA er.
“Det vi beskriver, mener jeg er en ren SPA. Noen sier at de har en SPA, men så er det en slags hybrid. Det kan skyldes at folk av manglende kunnskap lager en mellomting som verken er det ene eller det andre, eller at man kaller det SPA fordi det høres kult ut.” sier Albert.
En forenklet figur av en typisk MPA. Ved hvert lenkeklikk sendes en HTTP-request til serveren, som svarer med en ny HTML-fil, og nettleseren tegner opp siden.
En forenklet figur av en typisk SPA. Ved første sidevisning sendes en HTTP-request til serveren, som svarer med en HTML-fil for hele nettstedet. Ved hvert påfølgende lenkeklikk hentes bare Javascript, og nettleseren bytter ut innholdet som mangler.
SPA-løsninger: Fremtidens netthandelsløsning
I Webbhuset begynte vi å lage SPA-løsninger rundt 2017. SPA har eksistert siden midten av 2010-tallet, og i 2017 var det svært få som bygde nettsteder på den måten, fordi nettleserne ikke hadde spesielt god støtte for det. Rundt 2017 begynte det å fungere i de fleste nettlesere, og da var Webbhuset svært tidlig ute.
“Vi bruker denne teknologien fordi det er fremtiden. Vi kan bygge utrolig raske nettsteder med en sømløs brukeropplevelse uansett enhet. Du har jo ingen begrensninger slik du kan få med en MPA, der alt må gjøres på serveren.” forklarer Albert.
Kundecaset SnusMe som eksempel
Et godt eksempel på en ren og godt bygget SPA er SnusMe. Da vi bygde om SnusMes nettbutikk, tok vi SPA-løsningen et steg videre. SnusMes SPA-løsning henter alle produktene for hele nettstedet allerede ved første sidevisning.
“SnusMes nettbutikk har rundt 1 000 produkter, og det er omtrent like mange kilobyte som å laste ned ett bilde. Det går så raskt å hente 1 000 produkter at du ikke trenger å hente noe fra serveren når du klikker deg rundt på nettstedet. Du kan klikke mellom produkter og kategorisiden og legge i handlekurven uten at vi engang trenger å spørre serveren.” sier Albert.
Fordeler med en SPA-løsning
Rendrer i nettleseren i stedet for på serveren
I dag vil man ofte ha ulik design, layout og grensesnitt avhengig av om man er på desktop eller mobil, og da har man ulike HTML-filer for desktop og mobil. Problemet med å rendre (tegne opp) HTML på serveren er at serveren ikke vet hvor stor skjerm du har.
“Det er datamaskinen som vet hvor stor skjerm den har, eller hvor stort vindu som er åpent. Du kan ha et lite vindu på en stor skjerm eller tre vinduer ved siden av hverandre. Fordelen med SPA er at selve opptegningen av layouten og grensesnittet skjer i nettleseren, som vet hvor stor skjermen er. Nettleseren kan altså rendre en hamburgermeny på mobil og en hover-meny på desktop.” forklarer Albert.
Raskt nettsted uansett dekning
Sitter du for eksempel på toget og mister dekningen på et nettsted med SPA-løsning, kan du fortsatt klikke deg rundt mellom sidene du allerede har vært inne på, fordi de allerede er hentet. Dette kan du teste ved å slå på slow 3G i inspiseringsmodus, og du merker en markant forskjell i hastighet på en godt bygget SPA-løsning som SnusMe sammenlignet med en MPA-løsning.
“I en MPA må den hente HTML-filen for hver side du klikker deg inn på. Tar det da 10 sekunder med dårlig 3G, blir du gal hver gang du klikker på noe.” forteller Albert.
Med en SPA-løsning som SnusMe kan du likevel se deg rundt i hele produktkatalogen uten internett, og du kan også legge produkter i handlekurven. Dette må imidlertid ikke forveksles med en Progressive Web Application (PWA) der du kan gjøre alt offline. Laster du inn siden på nytt i en SPA uten internett, vil den ikke lenger fungere.
“Man kan si at det er som en app, og det er jo fremtiden. Det er slik man vil bygge nettsteder, og dette var ikke mulig for 10-15 år siden. Det fantes ingen teknologi for at nettleseren skulle gjøre dette.” sier Albert.
Siden 2017 har Webbhuset bare bygget SPA-løsninger, på grunn av alle fordelene og fordi det er en teknologi for en fremtidssikker netthandel.
FAQ om Single Page Application
Her er noen vanlige spørsmål og svar om Single Page Application:
Hva er forskjellen mellom en Single Page Application (SPA) og en Multi-Page Application (MPA)?
SPA: Laster i utgangspunktet én HTML-fil og oppdaterer innholdet dynamisk uten å laste hele siden på nytt. Det gir en raskere og mer interaktiv brukeropplevelse.
MPA: Består av flere HTML-filer, der hver sidevisning krever en ny forespørsel til serveren for å hente en ny HTML-fil. Hver navigering mellom sider betyr en full sidelasting.
Hva er fordelene med en SPA?
Raskere navigering og bedre brukeropplevelse, siden bare deler av siden oppdateres.
Bedre håndtering av cache og mindre belastning på serveren.
Mulighet for offline-modus ved hjelp av service workers.
Kan man ha en SPA-løsning uansett netthandelsplattform?
Ja, en SPA-løsning kan implementeres på i prinsippet hvilken som helst netthandelsplattform. I Webbhuset spesialiserer vi oss på å skreddersy netthandelsløsninger og kan hjelpe deg med å implementere en effektiv SPA-løsning uansett hvilken plattform du bruker.
Vil du vite mer?
Fyll ut skjemaet, så kontakter vi deg snart.
