Wat is een Single Page Application (SPA)? Een SPA is een webapplicatie die eenmalig als geheel is ingeladen. En daarna (slechts) delen van de inhoud via een API ververst. Alleen wanneer dat nodig is. Hierdoor kunnen bezoekers snel door de pagina’s klikken, dat biedt een vlotte gebruikerservaring. Wie wil dat nu niet? Dus, zo’n simpel SPA’tje hoe werkt dat precies? Aan een SPA zitten voor- en nadelen, die gaan we uitlichten.
Maar nog even over wat het nu precies is… Want het klinkt wel simpel en ik snap het wel, maar ik begrijp het niet… 😉
Dit is hoe het echt werkt
Als de website die jij bezoekt een Single Page Application is, dan wordt de HTML en Javascipt set gedownload zodra je die website bezoekt. Dit is anders bij reguliere websites. Daar wordt een pagina opgebouwd op een server, en daarna pas naar je browser gestuurd. Elke nieuwe pagina betekent een nieuw verzoek aan de server. Dit kost steeds tijd. Doordat slechts delen van een SPA-pagina herladen worden, geeft de website de bezoeker een (gevoel van) snelheid en een ‘snappy’ ervaring. Omdat er niet of minder gewacht hoeft te worden op het verversen van de pagina door de server. Over servers gesproken, met een SPA wordt de meeste logica alleen bij de eerste keer dat de site laad meegestuurd. Je kan met dezelfde server(s) dus meer bezoekers bedienen.
Wist je dat grote bedrijven als Netflix, LinkedIn en Gmail ook een SPA zijn?
Een ander voordeel van een SPA is dat de inhoud van je website niet vast zit aan het systeem waarin je het presenteert. Technieken komen en gaan (zeker in de wereld van javascript) en het is zonde als je bedrijf niet mee kan bewegen. Een SPA noemen ze daarom ook wel in één adem met een headless backend. Het CMS of de API waar de inhoud staat is niet verantwoordelijk voor hoe de bezoeker het ziet. De frontend, de SPA, haalt de inhoud die het nodig heeft op bij de backend en regelt vervolgens de weergave.
Ieder voordeel heb z’n nadeel
Veel van de nadelen van een SPA zijn niet onoverkomelijk, maar vragen wel aandacht voordat je een besluit neemt. Twee van de nadelen hebben dezelfde oorzaak: pagina’s worden niet geheel ververst maar deels vervangen. Hierdoor heb je niet standaard een navigatiegeschiedenis (de vorige en volgende knoppen in je browser). Algoritmes zoals de zoekmachine van Google hebben hier moeite mee.
Een vergelijkbaar probleem heb je met monitoring, veel analytics software verwachten dat hele pagina’s ververst worden.
Er zijn technische workarounds die je kan nemen om te voorkomen dat je achteraf schrikt van slechte SEO scores. Neem dit dus mee bij in de beginfase van je project.
Is een SPA hetzelfde als een statische website?
Een SPA heeft veel overeenkomsten met een statisch gegenereerde website, zoals de ervaring en de prestaties. Het verschil zit in de inhoud: een statische website is, nouja, statisch. De inhoud veranderd slechts incidenteel en er is minder interactie nodig met de bezoeker. Denk bijvoorbeeld aan een website met documentatie, het menu van een restaurant of de website van de leukste digital agency in Nederland.
Een goed voorbeeld in dit geval is het eerder genoemde LinkedIn. Een typische SPA omdat; veel knoppen, menu’s en acties die je uit kan voeren zonder dat de hele pagina ververst hoeft te worden.
Bij Enrise hebben we ervaring met SPA’s, dynamische en statische sites. Wil je een keer samen SPArren? Bel ons!
