Een snelle website met een headless backend en NuxtJS

De website is voor veel bedrijven een van de belangrijkste tools om nieuwe klanten aan te trekken. Een bezoeker is echter zeker nog geen klant. Onderzoek wijst uit dat het percentage websitebezoekers exponentieel afhaakt voor elke seconde die de pagina nodig heeft om te laden*. Daar gaat je potentiële klant. Waar je met Adwords wellicht zelfs voor betaald hebt? Wat kun je daar nu aan doen? In dit artikel vertel ik waarom NuxtJS samen met een headless back-end bij uitstek geschikt is om jouw website een performance boost te geven.

Pagina rendering technieken

Je kunt er voor kiezen om platte HTML pagina’s op te bouwen en die te hosten. Bij kleine eenvoudige websites is daar niets mis mee. Maar bij het onderhouden en uitbreiden van complexere projecten kan dit al gauw veel onnodig werk opleveren. Tegenwoordig zijn er veel verschillende technieken om je pagina aan de bezoeker te serveren. Deze technieken maken extra overhead verleden tijd en daarbij maken ze je website een stuk sneller. Hieronder drie van die technieken uitgelegd.

Server Side Rendering (SSR)

Wellicht de meest bekende en misschien ook de meest gebruikte methode is Server Side 

Rendering, afgekort als SSR. Hierbij vraagt de bezoeker een pagina op, de server ontvangt deze aanvraag, bouwt de pagina op en stuurt deze terug naar de bezoeker.

De server bouwt de pagina op door data te verzamelen uit bijvoorbeeld een database of een externe API. Dit maakt de opbouw en inhoud van de pagina’s ontzettend flexibel. De keerzijde is dat het een fractie langer duurt voordat de pagina weergegeven wordt. Dit ten opzichte van Static Site Generation (hieronder beschreven).

Server Side Rendering is zeer geschikt voor applicaties waarbij realtime data belangrijk is. Zoals bijvoorbeeld bij websites voor ticketverkoop, veilingsites, online marktplaatsen of in een persoonlijke omgeving voor je klanten.

Static Site Generation (prerendering)

Een opkomende techniek is Static Site Generation. Wat ook wel prerendering genoemd. Wanneer de bezoeker een pagina opvraagt hoeft deze niet te wachten op een server die de benodigde data bij elkaar verzamelt. De pagina is eerder al opgebouwd en kan direct teruggestuurd en getoond worden.

Het opbouwen van de pagina gebeurt tijdens het deployen (publiceren van wijzigingen op de website). Alle pagina’s van de website worden dan gerenderd en opgeslagen als HTML pagina’s. Dit geeft een behoorlijke snelheidswinst, omdat er geen data verzameld en/of pagina opgebouwd hoeft te worden tijdens de aanvraag. De keerzijde hiervan is dat deze techniek minder geschikt is voor het weergeven van dynamische content.

Static Site Generation of prerendering is bij uitstek geschikt voor websites die in mindere mate afhankelijk zijn van dynamische content. Bijvoorbeeld websites waar abonnementen verkocht worden zoals die van sportscholen, telecomproviders of streamingdiensten. Ook is het zeer geschikt voor algemenere bedrijfswebsites.

Client Side Rendering (CSR)

Een techniek die een aantal jaren geleden aan populariteit heeft gewonnen is Client Side Rendering. Afgekort als CSR. De bezoeker vraagt hierbij de pagina op en ontvangt een lege HTML pagina en dynamische JavaScript code om in de pagina te tonen.

Zoals de term Client Side Rendering al weggeeft, is het de verantwoordelijkheid van de client (de browser van de bezoeker) om de pagina op te bouwen. De server stuurt een blanke HTML pagina met specifieke JavaScript code naar de browser welke vervolgens de pagina opbouwt. Deze techniek geeft veel flexibiliteit in opbouw van de pagina’s maar heeft als (groot) nadeel dat gebruikers zonder JavaScript een lege pagina te zien krijgen. Daarnaast hebben zoekmachines (zoals Google) meer moeite de pagina te indexeren of kunnen ze dit zelfs helemaal niet.

Client Side Rendering is geschikt voor dynamische pagina’s zoals persoonlijke afgeschermde klant omgevingen. Toch heeft Server Side Rendering hierbij de voorkeur zodat pagina’s, ook zonder JavaScript, altijd beschikbaar zijn. Deze techniek is ongeschikt voor publieke websites of webshops.

Headless back-end en NuxtJS front-end

De tech wereld verplaatst zich steeds meer richting gescheiden systemen om afhankelijkheden te verminderen. Ook op webgebied worden back- en front-end steeds vaker gescheiden van elkaar. De back-end beschikt hierbij over een API waarmee de (JavaScript) front-end kan communiceren. Deze verzameling technieken wordt ook wel Jamstack genoemd.

Headless back-end

Headless is een fancy term voor een systeem zonder front-end. Een headless back-end heeft in plaats van een front-end een API. Hiermee kunnen andere applicaties communiceren. Dit kunnen externe of interne applicaties zijn zolang ze over juiste sleutel beschikken. Omdat de back-end nu volledig op zichzelf staand is, kan deze ook in de taal en het framework gebouwd worden welke de toepassing het beste past.

JavaScript front-end, zoals NuxtJS

Andersom geldt dat natuurlijk ook. Omdat de front-end nu losstaand is van de back-end is het vrij welke technieken je toepast. Vaak kies je een JavaScript framework vanwege de flexibele aard van JavaScript. NuxtJS is zo’n JavaScript framework die goed kan communiceren met API’s van headless systemen. Zoals je hierboven hebt kunnen lezen is NuxtJS heel breed inzetbaar voor web applicaties in alle vormen. Wat nog niet is verteld; met behulp van NuxtJS kun je van een reguliere webapplicatie een mobiele webapplicatie maken, een zogenaamde PWA (Progressive Web App).  

Progressive Web App (PWA)

Een PWA is een webapplicatie die je kunt gebruiken als mobiele app en gaat verder dan een responsive layout. Een PWA heeft beschikking over functies die je ook in een app terugvindt. Denk hierbij o.a. aan push notificaties en offline functie. Een PWA wordt vaak gebouwd met een JavaScript framework zoals NuxtJS.

PWA’s bieden een aantal voordelen over traditionele mobiele apps. Ze worden ontwikkeld als uitbreiding op een bestaande webapplicatie. Dit wil zeggen dat er geen aparte codebase en weinig additioneel development werk nodig is. Ook heeft een PWA weinig tot geen opslag geheugen nodig op de mobiele telefoon.

De keerzijde van PWA is dat de app niet via de Apple App Store of Google Play Store te downloaden is. Wanneer een website een PWA beschikbaar heeft zal deze een banner tonen op mobiele devices. Door hierop te klikken voegt de gebruiker de app toe aan zijn/haar homescreen.

Er zijn veel toepassingen te bedenken waarbij een PWA nuttig is. Het kan bijvoorbeeld een mooie aanvulling zijn voor self service- of bedrijfsportalen. Klanten of medewerkers kunnen gemakkelijk het portaal als app opslaan op de mobiele telefoon. Zo is de webapp gemakkelijk benaderbaar en kan men ook gebruik maken van bijvoorbeeld push notificaties naar klanten of personeel.

Heb ik dit echt nodig?

Afhankelijk van de toepassing is een uitgebreide PWA voor je website misschien niet direct nodig. Maar een trage website daar wordt niemand blij van! Je website werkt en lijkt misschien snel genoeg op jouw glasvezelverbinding. Maar is die dat óók voor minder snelle (mobiele) apparaten en trage netwerkverbindingen? 

Met een eenvoudige check kun je zien hoe jouw website volgens Google performed. Ga maar eens naar PageSpeed Insights en vul daar het adres van jouw website in. Je krijgt een pagina te zien voor zowel mobiel als desktop met de bijbehorende score.

Wanneer je dat gedaan hebt zie je een score tussen de 0 en 100, hoe hoger hoe beter. Heb je een hoge score gehaald tussen de 80 en 90? Dan is je website al vrij goed geoptimaliseerd, NuxtJS kan dan nog dat laatste zetje geven. Lager dan 80, dan valt er nog winst te behalen, o.a. door de site op te bouwen met NuxtJS of onze hulp in te schakelen ;)!

*Bronvermelding: Website Load Time Statistics: Why Speed Matters in 2021