Wat is een single page application (SPA)?

Definitie: Een single page application (SPA) is een webapplicatie die in de browser één HTML-pagina laadt en daarna alleen de onderdelen van het scherm bijwerkt die veranderen, met behulp van JavaScript. Nieuwe gegevens worden op de achtergrond opgehaald, zodat de gebruiker niet bij elke klik op een volledige nieuwe pagina hoeft te wachten.

In het kort

• Bekende voorbeelden van een single page application zijn Gmail, Google Maps, Trello en de webversie van Spotify.
• SPA’s worden meestal gebouwd met JavaScript-frameworks zoals React, Vue of Angular, en halen hun gegevens via een API van de server.
• Het tegenovergestelde is een multi page application (MPA), waarbij elke klik een nieuwe pagina van de server laadt, zoals bij Wikipedia of de meeste nieuwssites.
• Een SPA voelt snel en vloeiend aan na het eerste laden, maar vraagt extra aandacht voor vindbaarheid in zoekmachines, de eerste laadtijd en beveiliging.

Wat is een single page application?

Een single page application is een webapplicatie die zich gedraagt als een app op je computer of telefoon. Je opent hem één keer in de browser, en daarna verandert de inhoud zonder dat de pagina opnieuw wordt geladen. Klik je in Gmail op een e-mail, dan verschijnt die direct, terwijl de rest van het scherm blijft staan. Er wordt geen nieuwe pagina opgehaald; alleen de gegevens van die ene e-mail.

Volgens Codecademy bestaat een SPA uit één pagina die JavaScript voortdurend bijwerkt, waarbij alleen de benodigde gegevens van de server worden opgevraagd. De browser doet dus veel meer werk dan bij een klassieke website. De server levert vooral gegevens, vaak in het formaat JSON, en de browser bouwt daar het scherm mee op.

Het woord single page betekent niet dat de applicatie maar één scherm heeft. Een SPA kan tientallen schermen hebben, zoals een overzicht, detailpagina’s, formulieren en instellingen. Het gaat erom dat de browser technisch maar één HTML-document laadt en alle schermen daarbinnen opbouwt.

SPA betekenis: single page application of one page website?

Bij de zoekvraag “spa betekenis website” gaan twee dingen vaak door elkaar. Een single page application is iets anders dan een one page website.

GoDaddy vat het verschil zo samen: een one page website is een lay-outkeuze met scrollnavigatie, terwijl een SPA een architectuurmodel is met rendering in de browser. Verder kan SPA in het Nederlands natuurlijk ook verwijzen naar een sauna of wellnesscentrum. In de wereld van websites en software gaat het bijna altijd om single page application.

Hoe werkt een single page application?

De werking van een SPA verloopt in een paar stappen:

1. Eerste bezoek. De browser laadt één HTML-pagina, samen met de JavaScript- en CSS-bestanden van de applicatie.
2. Opstarten. Het JavaScript start de applicatie en bouwt het eerste scherm op.
3. Gegevens ophalen. De applicatie vraagt via een API de gegevens op die nodig zijn, bijvoorbeeld de lijst met openstaande taken.
4. Navigeren. Klikt de gebruiker op een taak, dan past de applicatie het adres in de adresbalk aan en toont het detailscherm, zonder nieuwe pagina van de server.
5. Bijwerken. Past de gebruiker iets aan, dan stuurt de applicatie alleen die wijziging naar de server en werkt het scherm direct bij.

Volgens PhoenixNAP gebeurt de routing, het bepalen welk scherm bij welk adres hoort, aan de kant van de browser. Gegevens worden asynchroon opgehaald via technieken zoals Fetch of AJAX, meestal van een REST- of GraphQL-API. Voor realtime toepassingen, zoals een chat of live dashboard, worden volgens GoDaddy ook WebSockets gebruikt.

Een belangrijk onderdeel is state management: het bijhouden van de toestand van de applicatie, zoals wie is ingelogd, welke filters aanstaan en welke gegevens al zijn geladen. Bij grotere SPA’s gebruiken ontwikkelaars daar aparte hulpmiddelen voor.

Client-side rendering, server-side rendering en statisch genereren

Rendering is het opbouwen van wat de gebruiker op het scherm ziet. AppMaster en Codecademy onderscheiden drie manieren, die je ook kunt combineren:

Een klassieke SPA gebruikt client-side rendering. Frameworks als Next.js en Nuxt maken het mogelijk om per pagina te kiezen, zodat een publieke productpagina op de server wordt opgebouwd en een dashboard in de browser.

Wat is het verschil tussen een SPA en een MPA?

Bij een multi page application, de klassieke manier van websites bouwen, vraagt de browser bij elke klik een complete nieuwe pagina op bij de server. De server stelt die pagina samen en stuurt hem terug.

Softwaremind noemt Wikipedia en The New York Times als voorbeelden van MPA’s, juist omdat vindbaarheid daar zo belangrijk is. Veel moderne sites kiezen een tussenvorm. Codecademy beschrijft Amazon als vooral een MPA met onderdelen die als SPA werken, zoals de winkelwagen.

Voorbeelden van single page applications

De bronnen noemen samen een flink aantal bekende SPA’s:

• Gmail, de webversie van de e-maildienst van Google.
• Google Maps, waar je kunt zoomen en verschuiven zonder dat de pagina herlaadt.
• Google Docs, waarin je in de browser tekst bewerkt.
• Trello, waar je kaarten tussen lijsten sleept.
• Spotify Web Player, waarin muziek blijft spelen terwijl je door de applicatie navigeert.
• Facebook en de webversie van X (voorheen Twitter), waar nieuwe berichten verschijnen zonder volledige paginaverversing.
• Netflix en Airbnb, die volgens Softwaremind SPA-principes gebruiken.

Wat deze voorbeelden gemeen hebben: gebruikers blijven er langere tijd in, voeren veel handelingen uit en verwachten dat het scherm direct reageert.

Met welke frameworks bouw je een SPA?

Een SPA bouw je vrijwel altijd met een JavaScript-framework of -bibliotheek:

Volgens AppMaster werd Angular in 2010 door Google geïntroduceerd, React in 2013 door Facebook en Vue in 2014. Codecademy merkt op dat React zelf geen SPA is, maar een bibliotheek die vaak wordt gebruikt om SPA’s te bouwen.

Aan de serverkant draait een SPA op een API. Die kan gebouwd zijn met bijvoorbeeld Laravel, Node.js of Ruby on Rails. In het Laravel-ecosysteem bestaan ook tussenvormen zoals Inertia en Livewire, waarmee je een vloeiende interface krijgt zonder volledig losse SPA en API te bouwen.

Voordelen van een single page application

• Snelle, vloeiende ervaring. Na het eerste laden reageert de applicatie direct, omdat alleen gegevens worden opgehaald.
• Gevoel van een app. Overgangen, slepen, direct opslaan en live bijwerken voelen als een programma op je computer.
• Minder belasting voor de server. De server stuurt alleen gegevens, geen complete pagina’s.
• Scheiding tussen voorkant en achterkant. De API kan ook gebruikt worden door een mobiele app of een koppeling met een ander systeem.
• Offline mogelijkheden. Met service workers kan een SPA delen van de applicatie ook zonder verbinding laten werken, zoals bij een Progressive Web App.
• Hergebruik van code. Codecademy noemt als voordeel dat een SPA een makkelijker pad naar een mobiele app biedt.

Nadelen en aandachtspunten

• Langere eerste laadtijd. De applicatie moet bij het eerste bezoek in één keer worden geladen. Bij een grote SPA op een trage verbinding is dat merkbaar.
• Vindbaarheid in zoekmachines. Zoekmachines moeten JavaScript uitvoeren om de inhoud te zien. Volgens AppMaster zijn SPA’s daardoor moeilijker voor SEO.
• Complexiteit. State management, routing en caching vragen meer ontwikkelwerk dan bij een eenvoudige website.
• Beveiliging. Een deel van de logica draait in de browser en is daar zichtbaar. Volgens PhoenixNAP brengt dat risico’s mee zoals cross-site scripting en misbruik van de API. Controles op rechten horen daarom altijd ook op de server.
• Terugknop en geschiedenis. Codecademy wijst op afwijkend gedrag van de terugknop als de routing niet goed is ingericht.
• Afhankelijk van JavaScript. Staat JavaScript uit of laadt het niet goed, dan werkt de applicatie niet.
• Toegankelijkheid. Schermlezers merken niet altijd dat de inhoud is veranderd. Dat vraagt bewuste keuzes in de bouw.

Single page application en SEO

Voor een applicatie achter een inlog, zoals een klantportaal of interne tool, maakt vindbaarheid niet uit. Google hoeft die schermen niet te zien. Voor een publieke website of webshop ligt dat anders. Daar zijn verschillende oplossingen voor:

• Server-side rendering (SSR). De server stelt de eerste versie van de pagina samen, zodat zoekmachines direct inhoud zien. Daarna neemt de SPA het over.
• Static site generation. Pagina’s worden vooraf als HTML gegenereerd, wat goed werkt voor inhoud die niet vaak verandert.
• Prerendering. Een vooraf opgebouwde versie van de pagina wordt aan zoekmachines getoond.
• Hybride opbouw. Contentpagina’s als klassieke pagina’s, interactieve onderdelen als SPA.
• Eigen adres en metadata per scherm, zodat elk scherm een unieke URL, titel en beschrijving heeft.

GoDaddy noemt daarnaast dynamische meta-tags en een eigen URL per weergave als basismaatregelen.

Wanneer kies je voor een single page application?

Een SPA past goed bij:

• Dashboards met grafieken en filters die direct reageren.
• Klantportalen en interne tools waarin gebruikers lang werken en veel handelingen uitvoeren.
• SaaS-producten met een interface die aanvoelt als een programma.
• Planning- en samenwerkingstools waarin onderdelen live worden bijgewerkt.
• Toepassingen die ook als mobiele app of PWA beschikbaar moeten komen.

Een klassieke opbouw of een hybride vorm past vaak beter bij:

• websites waarin inhoud en vindbaarheid centraal staan, zoals blogs, nieuwssites en informatieve bedrijfswebsites;
• eenvoudige formulieren of rekentools die geen complexe interactie vragen;
• projecten met een klein budget waarin snelheid van bouwen belangrijker is dan een app-achtige ervaring.

Hoe bouw je een SPA?

De ontwikkeling van een SPA volgt meestal deze route:

1. Bepaal de schermen en de belangrijkste taken van de gebruiker.
2. Ontwerp de API: welke gegevens heeft elk scherm nodig, en welke handelingen moeten naar de server?
3. Kies een framework dat past bij het team en de toepassing.
4. Richt routing en inloggen in, zodat elk scherm een eigen adres heeft en alleen bevoegde gebruikers erbij kunnen.
5. Bouw de schermen als componenten die je kunt hergebruiken.
6. Regel foutafhandeling en laadstatussen, zodat de gebruiker ziet wanneer iets wordt opgehaald of misgaat.
7. Test op verschillende apparaten en verbindingen, inclusief een trage mobiele verbinding.
8. Optimaliseer de eerste laadtijd, bijvoorbeeld door code op te splitsen en alleen te laden wat nodig is.

SPA en Progressive Web App

Een Progressive Web App (PWA) en een SPA worden vaak in één adem genoemd, maar het zijn verschillende dingen. Een SPA beschrijft hoe de applicatie technisch is opgebouwd. Een PWA beschrijft wat een webapplicatie extra kan: installeren op het beginscherm, offline werken en meldingen tonen. Veel PWA’s zijn als SPA gebouwd, omdat die opbouw zich goed leent voor offline werken met service workers. Een SPA is dus niet automatisch een PWA, en een PWA hoeft niet per se een SPA te zijn.

Veelgemaakte fouten bij een SPA

• Een SPA kiezen voor een website die vooral gevonden moet worden. Dan besteed je veel moeite aan het oplossen van een probleem dat je zelf hebt veroorzaakt.
• Rechten alleen in de browser controleren. Wat in de browser draait, kan worden aangepast. De server moet bij elke aanvraag controleren of de gebruiker iets mag zien of doen.
• Geen laadstatus en foutmelding. Als gegevens even op zich laten wachten, moet de gebruiker zien dat er iets gebeurt.
• Te grote bundels. Alle code in één keer laden maakt het eerste bezoek traag. Splits code op en laad onderdelen pas als ze nodig zijn.
• Geen eigen adres per scherm. Gebruikers willen een link kunnen delen of een scherm als favoriet bewaren.

Onderhoud van een SPA

Een SPA leunt op een framework en een flink aantal pakketten. Die worden regelmatig bijgewerkt, net als de browsers waarin de applicatie draait. Wie die updates jarenlang overslaat, krijgt een applicatie die steeds lastiger aan te passen is. Spreek bij het laten bouwen af wie de updates bijhoudt, hoe vaak dat gebeurt en hoe getest wordt dat alles na een update nog werkt. Kies bij voorkeur een breed gebruikt framework, zodat een andere ontwikkelaar later kan aansluiten.

Wat betekent dit voor jouw project?

Of een applicatie technisch een SPA wordt, is voor de meeste opdrachtgevers niet het eerste punt. Ik begin met de vraag wie het gaat gebruiken en welke taak die persoon als eerste moet kunnen afronden. Werkt een planner er de hele dag in, met veel klikken en filters, dan is een vloeiende interface waardevol. Bekijkt een klant af en toe een status, dan volstaat een eenvoudiger opbouw die sneller te bouwen en makkelijker te onderhouden is.

Daarna onderzoek ik of een bestaand pakket, een koppeling of maatwerk het beste past. Bij maatwerk kies ik de techniek die past bij de taak, niet andersom. Ik wil vooraf duidelijk hebben wat we met een eerste versie bedoelen, zodat de keuze tussen SPA, klassieke opbouw of een tussenvorm volgt uit wat gebruikers echt doen.

Vraag? Wil je een webapplicatie laten bouwen en twijfel je over de opbouw? Stuur me voor wie het is, wat er nu gebeurt en wat de eerste versie moet oplossen. Dan bepalen we samen de logische eerste stap. Lees ook wat er komt kijken bij een webapplicatie bouwen.

Veelgestelde vragen over single page applications

Wat is een single page application?

Een single page application is een webapplicatie die één HTML-pagina laadt en daarna alleen de onderdelen van het scherm bijwerkt die veranderen. Gegevens worden op de achtergrond opgehaald via een API, waardoor de applicatie snel en vloeiend aanvoelt.

Wat is de betekenis van SPA bij een website?

Bij websites staat SPA voor single page application: een technische opbouw waarbij de browser één pagina laadt en de inhoud met JavaScript bijwerkt. Het is iets anders dan een one page website, waarbij alle inhoud op één lange pagina staat.

Zijn single page applications slecht voor SEO?

Niet per definitie, maar ze vragen extra aandacht. Omdat de inhoud via JavaScript wordt opgebouwd, gebruiken SPA’s voor publieke pagina’s vaak server-side rendering, prerendering of een hybride opbouw. Voor applicaties achter een inlog speelt SEO meestal geen rol.

Verwante termen

Webapplicatie · Web app · Progressive Web App · JavaScript · REST API · Laravel