De Uitdaging

Als het grootste consumentenplatform van Nederland heeft Radar (AVROTROS) te maken met enorme hoeveelheden content, variërend van dagelijkse nieuwsartikelen tot complexe onderzoeksdossiers en video-fragmenten. De uitdaging was om de verouderde frontend-architectuur te vervangen door een modern, schaalbaar systeem dat niet alleen razendsnel is voor de miljoenen maandelijkse bezoekers, maar ook maximale flexibiliteit biedt aan de redactie om content te structureren zonder tussenkomst van developers.

De Technische Oplossing

Voor de herbouw van Radar heb ik een moderne Headless-stack geïmplementeerd, waarbij de focus lag op performance, type-safety en een modulaire opbouw:

• Nuxt 3 Framework: Gekozen voor Nuxt 3 vanwege de superieure Server-Side Rendering (SSR) capaciteiten. Dit is essentieel voor de SEO-waarde van de duizenden Radar-artikelen en zorgt voor een razendsnelle First Contentful Paint, zelfs bij piekmomenten tijdens de televisie-uitzendingen.

• Directus als Headless CMS: Implementatie van Directus om de data-architectuur volledig los te koppelen van de presentatielaag. Hierdoor konden we complexe datamodellen opzetten voor de 'Hulplijn', uitzendingen en artikel-relaties, terwijl de redactie een intuïtieve interface behoudt.

• Component-Driven Development (Vue 3): Ontwikkeling van een robuuste library aan herbruikbare Vue-componenten. Door gebruik te maken van de Composition API en Nitro (de server engine van Nuxt), is de codebase modulair, testbaar en eenvoudig uit te breiden.

• Performance & Core Web Vitals: Optimalisatie van de volledige rendering-pipeline. Door slim gebruik van caching-strategieën en lazy-loading van zware assets (zoals video-embeds) scoort het nieuwe platform hoog op alle web-standaarden.

De Impact

• Developer Experience: Dankzij de overstap naar Nuxt 3 en TypeScript is de ontwikkelsnelheid aanzienlijk verhoogd en is de foutgevoeligheid binnen de frontend verminderd.

• Redactionele Vrijheid: Door de flexibele inrichting in Directus kan de redactie nu zelfstandig nieuwe dossier-pagina's en interactieve elementen samenstellen via een blokken-systeem (Page Builder-principe).

• Toekomstbestendig: Een schaalbare architectuur die eenvoudig kan worden uitgebreid met nieuwe features, zoals gepersonaliseerde content-feeds of verbeterde zoekfunctionaliteiten, zonder de kern van het systeem te belasten.

Gebruikte Technieken

• Frontend: Nuxt 3 (Vue.js, TypeScript, Post CSS)

• CMS: Directus (Node.js / PostgreSQL)

• API: REST / GraphQL integratie

• Workflow: Agile ontwikkeling binnen het digitale team van AVROTROS