Dienst · Web-ontwikkeling

Single Page Application laten maken.

Een SPA is een web-app die je één keer laadt, waarna alle navigatie en interactie client-side gebeurt — denk Gmail, Trello, Notion of Figma. Wij bouwen SPA's op maat voor dashboards, klantportalen en SaaS-producten waar app-gevoel en snelheid bepalend zijn voor de UX.

React & VueTypeScriptPWA-readyReal-time UI

Een SPA is een app, geen website.

Bij een traditionele website (multi-page application) vraagt elke klik een nieuwe HTML-pagina op bij de server. Bij een Single Page Application laadt de browser één keer een JavaScript-bundle, en daarna handelt de app zelf alle navigatie, data-uitwisseling en state af. Het voelt voor de gebruiker als een desktop- of mobiele app: instant transities, geen flash-of-white, en het gevoel dat alles direct reageert. Klassieke voorbeelden die u dagelijks gebruikt zijn Gmail, Google Maps, Trello, Notion en Figma — allemaal SPA's.

Dat maakt een SPA de juiste keuze voor producten waar gebruikers langere sessies in doorbrengen — dashboards, projectmanagement-tools, klantportalen, configuratoren en real-time-toepassingen. Voor een marketing-site of contentplatform is een SPA juist meestal niet het beste idee, en daar zijn we eerlijk over. De afweging tussen SPA, server-rendered MPA of een hybride aanpak met islands (Astro) maken we samen met u, voordat er ook maar één regel code wordt geschreven.

Wij bouwen al jaren SPA's voor SaaS-vendors, B2B-portalen, admin-panelen en mobile-first web-apps. Telkens op maat, telkens met TypeScript van begin tot eind, en telkens met aandacht voor de aspecten waar SPA's traditioneel zwak in zijn: snelle initial load, toegankelijkheid en gedrag bij slechte verbindingen. Hoe een SPA past in het bredere palet van web-ontwikkeling bespreken we graag in een kennismaking.

Drie typische SPA-trajecten.

De meeste SPA-aanvragen die wij zien vallen in één van drie patronen. Welke past, hangt af van het type product en de mate van real-time-interactie. We adviseren hierover in het eerste gesprek.

Compact traject · vast sprintbudget

Klantportaal of dashboard-app

Een ingelogde omgeving waarin gebruikers data inzien, rapportages bekijken en acties uitvoeren. React of Vue 3 als front-end, een REST- of GraphQL-API daaronder, en een component-library zoals shadcn/ui of Radix UI voor de UI-bouwstenen. Geschikt voor B2B-portalen, vendor-dashboards en eigen admin-tooling.

React + ViteTanStack QueryJWT-authREST-API
Middelgroot traject · vast sprintbudget

SaaS-product met meerdere modules

Een volwaardig product met meerdere rollen, een uitgebreid datamodel en doordachte UX-flows. Denk aan een planningsapp, een vergelijkbaar-met-Trello board, of een verticale SaaS voor een specifieke branche. Modulaire front-end, type-safety van database tot UI, en een design-system dat meegroeit met het product.

TypeScriptZustand of ReduxtRPC of GraphQLAuth0 of Keycloak
Groter traject · vast sprintbudget

Real-time- of PWA-toepassing

Een SPA waarin live-updates, samenwerking of offline-flow centraal staan: een chat-platform, een monitoring-cockpit, een trading-omgeving of een veld-app die ook zonder internet moet doorlopen. WebSocket of Server-Sent Events voor de stream, service workers voor de PWA-laag, en installeerbaar op desktop én mobiel.

WebSocketService workersInstalleerbaarOffline-first

De technologie-keuzes die we maken.

Een SPA bestaat uit meer dan alleen een framework. Elk van deze keuzes heeft impact op de ontwikkelsnelheid, de beheerbaarheid en hoe goed uw team de app over een paar jaar nog kan onderhouden. Een korte rondleiding door wat we typisch inzetten en waarom.

Framework

React, Vue, Angular of Svelte

React met Vite of Next.js is onze meest gekozen stack — grootste ecosysteem, makkelijkst om team uit te breiden. Vue 3 met Composition API en Nuxt is een mooi alternatief, zeker bij teams met een Vue-historie. Angular kiezen we bij enterprise-trajecten waar TypeScript-strictheid centraal staat. Svelte of Solid.js voor lichtgewicht of performance-kritieke apps.

State-management

Zustand, Redux of TanStack Query

Voor de meeste apps starten we met TanStack Query voor server-state plus Zustand voor lokale UI-state — eenvoudig en schaalbaar. Redux Toolkit reserveren we voor complexe domeinen waar tijdreis-debugging echt waarde toevoegt. In Vue-projecten is Pinia de standaard. We voorkomen state-soep door duidelijke conventies vanaf sprint één.

Forms en validatie

React Hook Form, Formkit

Forms zijn waar veel SPA's op vastlopen: validatie-regels die uit sync raken met de backend, slechte error-states, ontoegankelijke labels. We werken met React Hook Form en Zod-schema's die we delen tussen client en server, zodat één bron van waarheid de validatie regelt. In Vue gebruiken we Formkit met hetzelfde patroon.

Auth-laag

Auth0, Keycloak of eigen JWT

Voor klantportalen kiezen we vaak Auth0 of een vergelijkbare hosted-IdP — snel live, sociale logins gratis erbij, SAML en SSO als u groeit. Bij privacy-gevoelige sectoren of on-premise-eisen zetten we Keycloak in, dat u zelf kunt hosten. Een eigen JWT-stack bouwen we alleen als de eisen écht uniek zijn, want auth-fouten zijn duur.

Backend en data

REST, GraphQL of tRPC

Een SPA is alleen zo goed als de API eronder. We bouwen REST met Spring Boot, Node of Django; GraphQL met Apollo of Hasura wanneer het datamodel relationeel is en de UI veel verschillende slices nodig heeft; tRPC wanneer client en server beide in TypeScript draaien en we end-to-end type-safety willen zonder schema-generatie.

Real-time

WebSocket, SSE of Phoenix

Voor chat, multi-user-collaboration en live-dashboards zetten we WebSockets in (via Socket.IO of een managed-service zoals Pusher of Ably). Server-Sent Events kiezen we als de stream één-richting is — eenvoudiger te schalen. Voor Elixir/Phoenix-backends benutten we Phoenix Channels, die letterlijk voor dit type real-time-UI gebouwd zijn.

Wat u krijgt aan het einde.

Een productieklare SPA, plus alles eromheen om het zelf te beheren, uit te bouwen of door een ander team te laten overnemen. Geen black-box.

  • De SPA in productie + stagingTwee environments, draait in uw cloud (GCP, AWS, Azure) of bij ons. CI/CD-pipeline staat klaar voor doorontwikkeling.
  • Codebase en design-systemVolledige TypeScript-source, build-instructies, een gedocumenteerd componenten-library, en Storybook of een vergelijkbare component-catalogus.
  • API-laag en data-contractenDe backend-endpoints waar de SPA op rust, met OpenAPI- of GraphQL-schema en een typed client zodat front-end en back-end nooit uit sync raken.
  • Test-suite en performance-budgetUnit-tests, end-to-end-tests in Playwright of Cypress, en duidelijke Core Web Vitals-doelen die we per release toetsen.
  • Beheer-contract (optioneel)Monitoring, security-patches op dependencies, performance-bewaking en doorontwikkeling. Vaste maandprijs, vier reactietijd-niveaus.

Wanneer een SPA de juiste keuze is.

Vier patronen waarin een Single Page Application echt meerwaarde levert. Herkent u uw situatie hierin, dan praten we graag verder.

App-gevoel

Ingelogd, langer dan een minuut

Uw gebruikers blijven niet vijf seconden — ze werken in de tool. Een full-page-reload bij elke klik breekt dat ritme. Een SPA voelt zoals een desktop- of mobiele app aanvoelt.

Real-time

Data verandert tijdens gebruik

Een dashboard met live KPI's, een chat, een trading-scherm, een monitoring-cockpit. SPA's met WebSocket of Server-Sent Events tonen updates zonder dat de gebruiker een refresh-knop hoeft te zoeken.

Complexe state

Veel interactieve schermen

Filters, drag-and-drop, multi-step-forms, geneste tabellen, in-place-editing. Dit soort UI vraagt om client-side state-management — en daar zijn SPA's voor gebouwd.

PWA-ambitie

Installeerbaar en offline-bestendig

Een buitendienstmonteur die in een kelder geen 4G heeft. Een tablet-app voor de werkvloer. PWA-functionaliteit boven op een SPA geeft installatie op het home-screen plus een werkbare offline-modus.

Nog niet zeker over een groot traject?

Test je idee eerst — werkend prototype in 1 dag

Met OneDayBuild maken we je idee in één dag tastbaar voor €950, zodat je weet of verdere ontwikkeling de investering waard is. Besluit je door te gaan met de volledige bouw? Dan verrekenen we de kosten volledig.

Bekijk OneDayBuild →

Hoe een SPA-traject bij ons loopt.

1

Kennismaking en scoping

Een gesprek waarin we begrijpen welke flows de SPA moet ondersteunen, welk type gebruikers ermee werken, en waar het integreert met uw bestaande landschap. Vaak vergelijken we hier ook SPA tegenover een server-rendered alternatief — niet alles hoeft een SPA te zijn.

2

Tech-keuze en UX-workshop

We bepalen samen het framework (React, Vue, of soms Svelte), de state-aanpak, de auth-laag en de backend-strategie. Parallel werken we de eerste schermflow uit in Figma met u en een paar eind-gebruikers, zodat de bouw start vanaf een gedragen ontwerp.

3

Bouw in sprints

Elke twee weken een werkende build die u kunt testen. We bouwen door horizontaal te skinen: eerst een werkende end-to-end-flow met één rol, dan verdieping, dan extra rollen. Performance-budget en a11y-checks lopen vanaf sprint één mee.

4

Hardening en uitrol

Pen-test, accessibility-audit (WCAG 2.2 AA), Lighthouse-rapport, en een gefaseerde uitrol naar uw gebruikers. Daarna kunnen we het beheer doen, óf netjes overdragen aan uw eigen team met een runbook en een paar overdracht-sessies.

SPA tegenover de alternatieven.

Een SPA is niet per definitie de juiste keuze. Hieronder staan de drie meest voorkomende alternatieven en wanneer ze een betere fit zijn. We bespreken dit eerlijk in het eerste gesprek — als een SPA niet past, zeggen we dat ook.

Traditional MPA

Server-rendered multi-page

Een klassieke server-rendered website met Rails, Django, Laravel of Spring. Beter voor content-zware sites, marketing-pagina's en publicaties die hoog moeten ranken in zoekmachines. Geen JavaScript-vereiste op de client, snelle eerste paint, eenvoudige SEO. Wij gebruiken dit voor uw publieke website en kiezen SPA voor de ingelogde tooling daarachter.

MPA met islands

Astro of een hybride aanpak

Astro rendert standaard server-side, maar laat u "islands" toevoegen waar wel interactiviteit nodig is. Daarmee combineert u SEO-prestaties van server-rendering met de interactiviteit van React of Vue op specifieke delen. Een mooi compromis voor sites die deels content, deels app zijn — bijvoorbeeld een marketplace met productpagina's plus een ingelogd dashboard.

Native of hybride app

iOS, Android of React Native

Wanneer u diepe hardware-toegang nodig heeft (camera, bluetooth, push-notificaties op iOS), een echte offline-flow over lange periodes, of distributie via de App Store voor consumer-bereik, dan is een native of hybride app vaak de betere keuze. We adviseren erover en bouwen ze ook, maar een PWA op basis van een SPA is voor veel use cases een goedkoper en sneller pad naar hetzelfde resultaat.

No-code platforms

Bubble, Retool, Webflow

Voor interne tools of een eerste validatie kunnen no-code-platforms u snel iets werkends opleveren. Het loopt vast wanneer u eigen branding, complexe rollen, real-time-functionaliteit of integraties op maat nodig heeft — dan ontstaat al snel een lock-in die later duur is om uit te wikkelen. Vaak adviseren we: start no-code voor de eerste validatie, ga over naar een SPA op maat zodra het product zich bewijst.

Veelgestelde vragen.

De vragen die opdrachtgevers stellen voordat we beginnen aan een SPA-traject.

Wat is het verschil tussen een SPA en een multi-page application?
Bij een multi-page application (MPA) stuurt de server bij elke klik een nieuwe HTML-pagina. Bij een Single Page Application laadt de browser één bundle, en daarna handelt JavaScript alle navigatie en data-uitwisseling af. SPA's voelen snel en app-achtig na de eerste load, MPA's renderen sneller bij de eerste paint en zijn beter voor content-zware sites. Voor admin-panels, SaaS en dashboards is SPA bijna altijd de juiste keuze; voor een marketing-site of nieuwsplatform meestal niet. Een tussenvorm zoals Astro met islands bestaat ook — die bespreken we graag als uw product daar baat bij heeft.
Hoe zit het met SEO bij een Single Page Application?
SEO bij SPA's is sinds 2018 een stuk minder problematisch dan vroeger, omdat Googlebot JavaScript inmiddels uitvoert. Voor publieke pagina's die hoog moeten ranken raden we toch vaak een hybride aanpak aan: server-side-rendering of pre-rendering via Next.js, Nuxt of Remix, zodat de eerste paint indexeerbaar is. Voor ingelogde dashboards en interne tools speelt SEO sowieso geen rol — daar kiezen we voor pure client-side rendering omdat dat de architectuur eenvoudiger houdt. We maken die afweging per pagina-type, niet voor de hele app.
Kiezen jullie React, Vue of Angular?
Wij werken het meest met React, omdat het ecosysteem groot is en u later makkelijk team-leden of een andere bouwpartij vindt. Vue 3 zetten we graag in als uw eigen team al een Vue-achtergrond heeft of als u Nuxt voor SSR wilt. Angular is in onze ervaring vooral relevant in enterprise-omgevingen waar TypeScript-strictheid en een dichtgetimmerd framework gewenst zijn. Svelte en Solid.js gebruiken we incidenteel als de use case dat vraagt. De keuze maken we niet op basis van een hype, maar op basis van uw team en wat u over vijf jaar nog wilt beheren.
Kan de SPA geïnstalleerd worden als app op telefoon of laptop?
Ja, dat is precies wat Progressive Web App-functionaliteit toevoegt. Met service workers, een web-manifest en de juiste icons wordt uw SPA installeerbaar via de browser, zonder dat u langs de App Store of Play Store hoeft. Het werkt op desktop, Android en iOS. PWA's zijn een goed alternatief voor een native app wanneer u geen diepe hardware-toegang nodig heeft en geen aparte iOS- en Android-codebases wilt onderhouden. Bij intensief offline-gebruik of camera- en bluetooth-functies kijken we naast PWA ook naar een echte native of hybride app.
Hoe regelen jullie real-time updates in een SPA?
Afhankelijk van het patroon: voor bidirectionele communicatie zoals chat en multi-user-collaboration gebruiken we WebSockets, meestal via een library zoals Socket.IO of een hosted-service zoals Pusher of Ably. Voor één-richting-updates zoals een live dashboard kiezen we vaak voor Server-Sent Events, omdat dat eenvoudiger te schalen is. Voor optimistische UI-updates en cache-synchronisatie zetten we TanStack Query of vergelijkbare tooling in. Het uitgangspunt is altijd dat de UI direct reageert, zelfs als de server iets later antwoordt.
Wat bepaalt de kosten van een SPA-traject?
Het aantal en de complexiteit van de schermen, het aantal rollen en rechten, de diepte van de integraties met uw bestaande systemen, en de mate van real-time- of offline-functionaliteit. Een ingelogd portaal voor één rol met een handvol views is een ander gesprek dan een SaaS-platform met tien rollen, drie integraties en een PWA-laag. We werken op basis van vaste sprintbudgetten zodat u per sprint controle houdt over de uitgaven. In het eerste gesprek schetsen we samen de scope en geven we een eerlijke indicatie.
Hoe lang duurt het voor we live kunnen?
Een eerste werkende versie van een afgebakend portaal of dashboard kan binnen een paar sprints live staan. Een volwaardig SaaS-product met meerdere modules en integraties is een traject van meerdere sprints, met een gefaseerde uitrol naar uw gebruikers. We houden er bewust van om u een vast getal te beloven dat de scope geweld aandoet — wel committen we ons aan een sprint-cadans en heldere milestones, zodat u op elk moment kunt bijsturen.
Werken jullie samen met onze eigen ontwikkelaars?
Ja, dat doen we vaak. Sommige klanten willen de SPA volledig door ons laten bouwen en daarna in beheer nemen; andere willen vanaf dag één co-development zodat hun eigen team de codebase straks kan overnemen. We zijn in beide setups productief, zolang we vooraf duidelijke afspraken maken over code-ownership, review-protocollen en de overdracht. Een goed gedocumenteerd design-system helpt enorm bij die overdracht.

Praat met ons over uw Single Page Application.

Een vrijblijvende kennismaking van een half uur. We luisteren naar wat u wilt bouwen, denken hardop mee over de tech-keuze, en zijn er eerlijk over als een SPA niet de beste vorm is voor uw vraagstuk. Ook bij vraagstukken rondom microservices-architectuur of een bredere enterprise-software-strategie denken we graag mee.

Edit Content