Headless oplossing
Vanwege de duidelijke wens van ASN Bank voor een website met het CMS-systeem Drupal zochten wij de oplossing in de frontend en kozen we voor een headless oplossing met een losse backend en frontend. De backend data uit Drupal wordt over een Application Programming Interface (API) naar een onafhankelijke frontend gestuurd. De frontend zet de data om in de juiste pagina’s en componenten. In principe zijn hier verschillende frontend oplossingen voor, maar vanwege de transities en het ophalen van de backend data is het gebruik van een JavaScript framework de beste optie.
JavaScript framework
Binnen het frontend team van Netvlies werken we vaak met het JavaScript framework Vue.js. Met Vue kun je onder andere SPA’s bouwen, waarbij alle data via een API wordt opgehaald in de frontend. De website kan leven op één url, vandaar de naam ‘Single Page’. Doordat alle data op die ene pagina beschikbaar is, kun je makkelijk transities tussen pagina’s maken.
In principe een goede oplossing voor paginaovergangen, maar voor zoekmachine optimalisatie (SEO) brengt dit nieuwe uitdagingen met zich mee. Hoe gaat Google pagina’s indexeren als deze pas op pagina-laad met content worden gevuld? Hoe maakt Google onderscheid tussen een artikel en de hompage als alles op dezelfde url leeft? Hoe zorg je dat pagina’s waarop je oneindig kunt scrollen snel worden geladen voor de gebruiker?
Universal App met Nuxt.js
Een technische opbouw die bijdraagt aan een goede vindbaarheid in zoekmachines was doorslaggevend in de keuze voor de frontend opzet. We gingen namelijk niet zomaar een frontend webapplicatie bouwen, maar een SEO-proof platform met deelfunctionaliteiten voor social media. Een SPA viel daarom af.
We kozen voor een Universal App. Dit is een app die Javascript code, zowel aan de gebruiker (client) als server kant kan uitvoeren. In tegenstelling tot een SPA zorgt een Universal App dat de pagina aan de server kant wordt opgebouwd (ook wel Server Side rendering genoemd), waardoor bezoekers direct content te zien krijgen. De opbouw van de pagina wordt door de losse frontend server direct vertaald naar HTML. Nog vóór de bezoeker de pagina te zien krijgt. De website is hierdoor sneller en pagina’s zijn leesbaar en indexeerbaar voor Google en andere robots. De browser heeft de HTML namelijk al van de server ontvangen en hoeft geen JavaScript om te zetten tot een werkbare website.
Om bovenstaande situatie te realiseren, volstaat alleen het JavaScript Framework Vue.js niet. Gelukkig is Nuxt.js dé Vue.js oplossing voor Universal Apps. Dit frontend framework biedt een laagdrempelige oplossing voor het opbouwen van de structuur van de website, ook wel routing van de frontend genoemd: welke pagina en content is de homepage, wat zijn overzichtspagina’s, wat zijn artikel detailpagina’s en hoe zijn deze aan elkaar gerelateerd.
Bovendien past Nuxt.js automatisch de url balk van je browser aan, waardoor paginering op de homepage mogelijk is. Zonder dat de pagina, om nieuwe content te tonen, opnieuw geladen moet worden. Door de pagina transities lijkt het voor de bezoeker alsof je op dezelfde pagina bent gebleven, maar de url is wel degelijk veranderd. Alle artikelen hebben hierdoor een unieke url die bezoekers kunnen doorsturen naar en delen met anderen. Dit heeft een positieve impact op de vindbaarheid van de website, omdat elk artikel een unieke url heeft zonder dat dit ten koste gaat van de gebruikservaring. Daarnaast is het met Nuxt.js mogelijk om metatags, zoals meta title en description, mee te geven, een functionaliteit die ook al in Drupal zit.
Gebruiksvriendelijk headless CMS
De frontend en backend hebben we los van elkaar opgezet. Om een headless Drupal CMS soepel werkend te krijgen, hebben we een aantal optimalisaties doorgevoerd. Content aanpassingen die webredacteuren in Drupal doen, worden in een API gegoten en naar de frontend doorgezet. Vanwege de headless oplossing is sprake van twee losse servers en ontstaan twee losse urls: één voor de backend en één voor de frontend. Door aanpassingen in het Drupal CMS hebben we ervoor gezorgd dat beide omgevingen naadloos op elkaar aansluiten. Redacteuren van VanafHier hebben amper door dat ze tussen twee omgevingen switchen, zo blijft de werkwijze die zij voor het vorige platform hanteerden vrijwel gelijk. Redacteuren kunnen bijvoorbeeld direct via Drupal een voorbeeldweergave in de frontend bekijken en vanuit de frontend weer direct terugkeren naar het bewerken van een pagina in het CMS. Een feature die de gebruiksvriendelijkheid voor redacteuren voorop stelt.
Future-proof platform
Ik ben trots op het platform dat we met het team hebben weggezet. We hebben niet alleen een futureproof platform ontwikkeld, maar ook een klant ontzettend blij kunnen maken met onze oplossing. Bovendien scoort de website goed in Google PageSpeed door onder andere de Server Side Rendering oplossing en zijn de redacteuren tevreden. Neem een kijkje op het platform om onze technische oplossing te ervaren en om je te laten inspireren door concrete duurzaamheidstips.
Het team van Netvlies heeft creatief meegedacht over de beste oplossing voor onze websitebezoekers én onze redacteuren. Daarnaast moet het platform aan strenge veiligheidseisen voldoen en zowel op mobiel als desktop een geweldige ervaring voor de bezoeker bieden. Dat ze dat allemaal is gelukt, is iets waar ze terecht heel trots op mogen zijn. - Maartje Maas, Hoofdredacteur bij Vanafhier
Heb jij een soortgelijke wens of ben je benieuwd hoe wij jouw technische wens zouden realiseren? Neem contact met ons op. Wij zoeken graag samen met jou naar de beste technische mogelijkheden!