Een single-page application (SPA) is een website die één keer een pagina laadt en daarna de inhoud op het scherm met JavaScript ververst terwijl de gebruiker bezig is, in plaats van bij elke klik een verse pagina van de server op te vragen. De pagina laadt nooit volledig opnieuw, en daarom kan een SPA net zo soepel aanvoelen als een desktop- of mobiele app.
Stel je een whiteboard voor dat je telkens beschrijft en weer schoonveegt, tegenover een nieuw vel papier bij elke vraag. Het klassieke web is het notitieblok: elke klik haalt een nieuw vel. Een SPA is het whiteboard: het blijft staan en hertekent alleen de delen die veranderen. Frameworks als Angular, React en Vue zijn hier precies voor gemaakt. De keerzijde is dat al dat tekenen in JavaScript in de browser gebeurt, wat de SEO kan schaden en de eerste laadtijd kan vertragen, tenzij je server-side rendering toevoegt.
SPA’s zijn op hun best voor interactieve producten: dashboards, planners, interne tools en boekingsflows waar mensen veel doen in één zitting. Gmail is het schoolvoorbeeld. Je opent het één keer en leest, archiveert en zoekt daarna uren zonder dat de pagina ooit herlaadt.
De keerzijde gaat verder dan SEO. Omdat de browser eerst een brok JavaScript moet downloaden voordat hij iets nuttigs kan tonen, kan juist die eerste keer laden traag aanvoelen op een oudere telefoon, ook al is elke klik daarna direct. Het effect van “leeg scherm en dan ineens alles” is een veelgehoorde klacht bij naïef gebouwde SPA’s.
Juist daarom is een SPA de verkeerde keuze voor een simpele brochuresite of een blog. Daar laadt een eenpagina-website of een gewone meerpagina-opzet sneller en vraagt veel minder code om te onderhouden. Kies een SPA als de interactie het extra gewicht verdient, niet als standaard.
Bij TopDevs bouwen we SPA’s als een interface direct en app-achtig moet aanvoelen, en we combineren ze met server rendering zodat zoekmachines en nieuwe bezoekers niet hoeven te wachten.
