Vi bruger denne teknologi, fordi det er fremtiden. Vi kan bygge utroligt hurtige websites med en gnidningsfri brugeroplevelse uanset enhed. Man har jo ingen begrænsninger, som man kan få med en MPA, hvor alt skal gøres på serveren.
Vi bruger denne teknologi, fordi det er fremtiden. Vi kan bygge utroligt hurtige websites med en gnidningsfri brugeroplevelse uanset enhed. Man har jo ingen begrænsninger, som man kan få med en MPA, hvor alt skal gøres på serveren.
Forskellen på Multi-Page Application og Single Page Application
Siden 90'erne har standardstrukturen for et website været en Multi-Page Application. I midten af 2010'erne kom den nye teknologi Single Page Application, som i dag er grundlaget for alle Webbhusets dynamiske e‑handelsløsninger.
Sådan er et website bygget op
Enkelt forklaret er et website bygget op af grundstenene HTML, CSS og Javascript, som består af kode. HTML udgør strukturen og indholdet på siden, mens CSS og Javascript styrer udseendet og adfærden. Browseren læser koden og tegner grænsefladen, altså alt det indhold, man ser på siden, såsom billeder, tekster og knapper. Hver side har en unik webadresse (URL), og de tegnes af forskellige HTML-filer, som browseren henter fra serveren. Besøger man en kategoriside, består den af én HTML-fil, og når man derefter klikker ind på et produkt, henter browseren en ny HTML-fil med produktsidens indhold. Det har været standardopbygningen af et website siden 90'erne og kaldes Multi-Page Application (MPA).
“Hvis man voksede op i 90'erne, kan man måske huske, at det tog et minut at hente en ny side. Man klikkede på et link, og så stod den bare og indlæste, så der er sket meget siden da.” fortæller Albert Dahlin, CTO hos Webbhuset.
Skærmbillede af Webbhusets website i inspicér-tilstand. I koden kan man se, hvordan websitet er bygget op med HTML og CSS, som styrer websitets udseende og opbygning.
Udviklingen mod Single Page Application (SPA)
Med tiden opstod en ny teknologi, Single Page Application (SPA), hvor man i stedet for at hente nye HTML-filer for hvert nyt link kun henter én HTML-fil med en masse Javascript. Klikker man på et link i en SPA, bruges Javascript og kode, der allerede findes i den oprindelige HTML-fil, som blev hentet ved første besøg på websitet.
Indholdet på et website består ofte af en menu, header, footer og hovedindholdet. Normalt udskiftes kun hovedindholdet, når man navigerer til nye sider, mens menuen, headeren og footeren forbliver uændrede.
“Lad os sige, at man er inde i en webshop og klikker sig frem og tilbage mellem kategorisiden og forskellige produktsider. Man kigger måske på 10 forskellige produkter, før man beslutter sig for, hvilket produkt man vil købe. Med en SPA behøver man ikke hente kategorisiden, hver gang man går tilbage, for alle produktkort er allerede indlæst med Javascript. Derfor kan man bygge en meget hurtigere oplevelse med en SPA-løsning, da man ikke skal hente nye HTML-filer ved hver ny sidevisning.” fortæller Albert.
I en SPA er det kun indholdet i midten, der hentes med Javascript, hver gang man skifter side.
Ren SPA
Forenklet kan man sige, at det er med disse to kategorier, MPA og SPA, man bygger teknisk. Derudover findes der løsninger, som er en mellemting eller hybrider af de to. Alle har også lidt forskellige definitioner af, hvad en SPA er.
“Det, vi beskriver, er efter min mening en ren SPA. Nogle siger, at de har en SPA, men så er det en slags hybrid. Det kan skyldes, at folk af manglende viden laver en mellemting, der hverken er det ene eller det andet, eller at man kalder det SPA, fordi det lyder sejt.” siger Albert.
En forenklet figur af en typisk MPA. Ved hvert klik på et link sendes en HTTP-request til serveren, som svarer med en ny HTML-fil, og browseren tegner siden.
En forenklet figur af en typisk SPA. Ved første sidevisning sendes en HTTP-request til serveren, som svarer med en HTML-fil for hele websitet. Ved hvert efterfølgende klik på et link hentes kun Javascript, og browseren udskifter det indhold, der mangler.
SPA-løsninger: Fremtidens e‑handelsløsning
Hos Webbhuset begyndte vi at lave SPA-løsninger omkring 2017. SPA har eksisteret siden midten af 2010'erne, og i 2017 var der meget få, der byggede websites på den måde, fordi browserne ikke havde særlig god understøttelse af det. Omkring 2017 begyndte det at fungere i de fleste browsere, og der var Webbhuset meget tidligt ude.
“Vi bruger denne teknologi, fordi det er fremtiden. Vi kan bygge utroligt hurtige websites med en gnidningsfri brugeroplevelse uanset enhed. Man har jo ingen begrænsninger, som man kan få med en MPA, hvor alt skal gøres på serveren.” forklarer Albert.
Kundecaset SnusMe som eksempel
Et godt eksempel på en ren og velbygget SPA er SnusMe. Da vi byggede SnusMes webshop om, tog vi SPA-løsningen et skridt videre. SnusMes SPA-løsning henter alle produkter for hele websitet allerede ved første sidevisning.
“SnusMes webshop har omkring 1 000 produkter, og det er cirka lige så mange kilobyte som at downloade et billede. Det går så hurtigt at hente 1 000 produkter, at man ikke behøver hente noget fra serveren, når man klikker rundt på websitet. Man kan klikke mellem produkter og kategorisiden og lægge i kurven, uden at vi overhovedet skal spørge serveren.” siger Albert.
Fordele ved en SPA-løsning
Renderer i browseren i stedet for på serveren
I dag vil man ofte have forskelligt design, layout og grænseflade afhængigt af, om man er på desktop eller mobil, og så har man forskellige HTML-filer til desktop og mobil. Problemet med at rendere (tegne) HTML på serveren er, at serveren ikke ved, hvor stor en skærm man har.
“Det er computeren, der ved, hvor stor en skærm den har, eller hvor stort et vindue der er åbent. Man kan have et lille vindue på en stor skærm eller tre vinduer ved siden af hinanden. Fordelen ved SPA er, at selve tegningen af layoutet og grænsefladen sker i browseren, som ved, hvor stor skærmen er. Browseren kan altså rendere en burgermenu på mobil og en hover-menu på desktop.” forklarer Albert.
Hurtigt website uanset dækning
Sidder man for eksempel i toget og mister dækningen på et website med en SPA-løsning, kan man stadig klikke rundt mellem de sider, man allerede har besøgt, fordi de allerede er hentet. Det kan man teste ved at slå slow 3G til i inspicér-tilstand, og man mærker en markant forskel i hastigheden på en velbygget SPA-løsning som SnusMe i forhold til en MPA-løsning.
“I en MPA skal den hente HTML-filen for hver side, man klikker ind på. Tager det så 10 sekunder med dårligt 3G, bliver man vanvittig, hver gang man klikker på noget.” fortæller Albert.
Med en SPA-løsning som SnusMe kan man dog kigge rundt i hele produktkataloget uden internet, og man kan også lægge produkter i kurven. Det skal dog ikke forveksles med en Progressive Web Application (PWA) hvor man kan gøre alt offline. Genindlæser man siden i en SPA uden internet, virker den ikke længere.
“Man kan sige, at det er ligesom en app, og det er jo fremtiden. Det er sådan, man vil bygge websites, og det var ikke muligt for 10-15 år siden. Der fandtes ingen teknologi til, at browseren kunne gøre det.” siger Albert.
Siden 2017 har Webbhuset kun bygget SPA-løsninger, på grund af alle fordelene, og fordi det er en teknologi til en fremtidssikret e‑handel.
FAQ om Single Page Application
Her er nogle almindelige spørgsmål og svar om Single Page Application:
Hvad er forskellen på en Single Page Application (SPA) og en Multi-Page Application (MPA)?
SPA: Indlæser først én HTML-fil og opdaterer indholdet dynamisk uden at genindlæse hele siden. Det giver en hurtigere og mere interaktiv brugeroplevelse.
MPA: Består af flere HTML-filer, hvor hver sidevisning kræver en ny forespørgsel til serveren for at hente en ny HTML-fil. Hver navigation mellem sider betyder en fuld sideindlæsning.
Hvad er fordelene ved en SPA?
Hurtigere navigation og bedre brugeroplevelse, fordi kun dele af siden opdateres.
Bedre håndtering af cache og mindre belastning af serveren.
Mulighed for offline-tilstand ved hjælp af service workers.
Kan man have en SPA-løsning uanset e‑handelsplatform?
Ja, en SPA-løsning kan implementeres på stort set en hvilken som helst e‑handelsplatform. Hos Webbhuset er vi specialiseret i at skræddersy e‑handelsløsninger og kan hjælpe dig med at implementere en effektiv SPA-løsning, uanset hvilken platform du bruger.
Vil du vide mere?
Udfyld formularen, så kontakter vi dig snarest.
