Headless CMS · Umbraco + Next.js / Astro / Nuxt · Delivery API

Headless CMS
development op Umbraco

Umbraco als content-hub, een moderne JAMstack-frontend eroverheen. Redacteuren werken in een omgeving die ze kennen en vertrouwen, bezoekers krijgen een site die niet zichtbaar laadt maar simpelweg er is. De twee werelden gescheiden, maar naadloos op elkaar aangesloten.

Gebouwd door iemand die beide kanten heeft doorleefd — .NET-backend én moderne frontend.

Plan een headless-gesprek Wanneer is headless de juiste keuze?
<500ms TTFB Typische prestaties
Delivery API Ingebouwd in Umbraco
Edge-caching Wereldwijd laag latency
Elke frontend Next, Astro, Nuxt, Svelte

Een eerlijke lijst: wat levert headless op, en wat niet?

  • Wél: extreme snelheid. Static generation + edge caching levert laadtijden onder een seconde, waar ook ter wereld.
  • Wél: omnichannel. Dezelfde content kan naar website, mobiele app, kiosk-display en voice-assistant — via één API.
  • Wél: betere beveiliging. De backoffice staat niet publiek bereikbaar; alleen de gecachte JSON-API serveert bezoekers.
  • Niet: gratis. Complexere architectuur, meer ontwikkeltijd, vaak twee hosting-omgevingen. Headless loont bij echt hoge eisen — niet bij een brochure-site.
  • Niet: magisch sneller zónder goede architectuur. Een slecht opgezette headless-stack is trager dan een degelijke traditionele Umbraco-site.

De beslissing

Wanneer is headless écht de juiste keuze?

U heeft extreem hoge performance-eisen

E-commerce op schaal, nieuwsportals met miljoenen pageviews, content die wereldwijd gezien wordt. Elke honderdste seconde laadtijd vertaalt zich direct naar conversie of engagement. Dan loont de investering.

U levert content aan meer dan één kanaal

Website + mobiele app + kiosk + smart-TV + digital signage. In plaats van vijf CMS-oplossingen: één Umbraco-backoffice die alle kanalen voedt via API. Dát is waar headless echt onmisbaar wordt.

U heeft gescheiden content- en frontend-teams

Een redactieteam en een apart frontend-team, misschien zelfs extern. Headless laat beide werelden hun eigen tooling, deploy-ritme en werkwijze houden — zonder dat ze elkaar in de weg lopen.

Beveiliging is kritiek

Finance, overheid, healthcare: de backoffice mag niet publiek bereikbaar zijn. Bij headless staat alleen de frontend aan het publiek blootgesteld; het CMS zelf kan achter een VPN of private network draaien.

De stack

Waar ik mee werk — en wanneer

Niet elke frontend past bij elk project. Matching van stack aan use case is cruciaal.

Umbraco 17 + Content Delivery API

Vanaf Umbraco 12 zit er een native, REST- en GraphQL-ready Delivery API in de core. Geen third-party packages nodig, direct gevoed vanuit content types, met filter, search en expand-queries. Dit is de fundament-API voor elke headless setup.
  • Native Delivery API
  • REST + GraphQL
  • Geen plugins

Astro voor content-zware sites

Mijn voorkeursframework voor sites waarbij performance en SEO vooropstaan en interactiviteit beperkt is. Astro levert de kleinste JavaScript-bundles van alle moderne frameworks, rendert bij voorkeur static of server-side en ondersteunt elk component-framework (React, Vue, Svelte) naast elkaar.
  • Kleinste bundles
  • Islands-architecture
  • Multi-framework

Next.js voor interactieve applicaties

Voor sites met veel dynamiek, gebruikers-interactie of complexe state: Next.js blijft het referentie-framework. Server Components, ISR (Incremental Static Regeneration), App Router en Server Actions geven grip op hoe en wanneer content wordt opgehaald en gecached.
  • App Router
  • ISR
  • Server Components

Nuxt voor Vue-teams

Heeft uw team Vue-kennis? Dan is Nuxt de natuurlijke keuze. Functioneel vergelijkbaar met Next.js — SSR, statische generatie, nitro server, hybrid rendering — maar met de Vue-ontwikkelervaring die sommige teams nu eenmaal prettiger vinden.
  • Vue 3
  • Nitro server
  • Hybrid rendering

Umbraco Heartcore

Umbraco's SaaS headless-aanbod. Geen eigen hosting, geen servers om te beheren, direct schaalbaar. Duurder per maand, maar zonder DevOps-overhead. Ideaal voor organisaties zonder eigen infra-team, of voor snelle launches die later eventueel self-hosted gaan.
  • SaaS headless
  • Nul beheer
  • Snelle launch

Hosting: Vercel, Azure Static Web Apps, Cloudflare Pages

De frontend draait waar dat past. Vercel en Netlify voor snelste launch en beste DX. Azure Static Web Apps als u al in Azure zit. Cloudflare Pages voor wereldwijde edge-distributie tegen zeer lage kosten. Ik adviseer op basis van uw infrastructuur-context en budget.
  • Vercel
  • Azure SWA
  • Cloudflare Pages

Drie architectuur-keuzes die de rest bepalen

1. Static of Server-rendered? Static (SSG): build-time, blazing snel, duurdere publicaties. Server-rendered (SSR): fresh per request, meer server-load. Hybrid (ISR): build periodiek, update on-demand — meestal de beste afweging.

2. Hosten frontend en Umbraco samen of apart? Samen is simpeler, apart is schaalbaarder en veiliger. Voor sites met gevoelige content of mondiaal publiek raad ik scheiding aan — Umbraco private, frontend op global edge.

3. Preview-strategie? Dit is de vraag waar redacties op struikelen. Ik gebruik doorgaans Next.js-preview-mode of Astro's dev-mode met een Umbraco-koppeling, zodat redacteuren "live" previewen op de echte frontend, inclusief ongepubliceerde wijzigingen. Geen backoffice-preview-renderer die de echte site niet representeert.

Deze drie keuzes maken het verschil tussen een headless-setup die jarenlang prettig werkt en een die na zes maanden een onderhoudsramp wordt. Ik maak die keuzes bewust, samen met u.

Next.js Astro Nuxt SvelteKit Vercel Azure SWA Cloudflare Pages Umbraco Heartcore

Het proces

Hoe een headless-implementatie stap voor stap verloopt

Eerst de goede vragen beantwoorden. Daarna bouwen.

  1. Is headless wel de juiste keuze?

    Eerlijk gesprek over uw eisen, kanalen, volumes en team. Soms is het antwoord: traditioneel Umbraco is sneller, goedkoper en prettiger voor uw situatie. Dat zeg ik dan ook.

  2. Content modelling voor API-consumptie

    Content types ontwerpen met een frontend-consumer in gedachten: schone naamgeving, voorspelbare relaties, compositions die JSON-serialiseren tot iets werkbaars. Dit verschilt van content modelling voor Razor-views.

  3. Delivery API configuratie & security

    Delivery API inschakelen, caching-policy instellen, CORS configureren, API-keys voor private endpoints, rate limiting. Inclusief schaalplan voor verwachte load.

  4. Frontend-bouw met juiste rendering-strategie

    Static, SSR, ISR — per pagina-type de juiste keuze. Performance budget wordt gemonitored tijdens de bouw, niet pas achteraf. Preview-flow vanaf dag één ingericht.

  5. Deploy, caching & monitoring

    CI/CD-pipeline, cache-invalidation bij publicatie, on-demand revalidation, monitoring (uptime, performance, error rates). Een headless-stack heeft meer bewegende delen; goede monitoring is geen luxe.

  6. Redactie-training & beheer-overdracht

    Redacteuren zien hoe preview werkt, hoe publicatie de frontend ververst, hoe cache-invalidatie verloopt. Documentatie over beide stacks, zodat uw team het kan overnemen — eventueel door een ander bureau.

Past headless bij uw project?

Een gesprek van 30 minuten is genoeg om te bepalen of headless voor uw situatie de juiste route is — of juist niet. Ik geef eerlijk advies, ook als het betekent dat u beter af bent met een traditionele Umbraco-implementatie.

Plan een gesprek Traditionele Umbraco-site