De website is dus gebouwd op een moderne, headless stack die ook wel de JAMStack wordt genoemd. JAM staat voor Javascript, Api’s en Markup.
Javascript voor het ophalen van data en front-end interactiviteit, Api’s om de data vandaan te halen en te gebruiken voor het toevoegen van bepaalde functionaliteit en (statisch gegenereerde) Markup waaruit je pagina’s worden opgebouwd.
In plaats van dat je dus een pure server hebt waaraan de browser telkens vraagt “hoe ziet deze pagina eruit?” krijgt de CMD website in deze nieuwe opzet de benodigde data voor de pagina’s vooraf en laten we een static site generator de benodigde HTML files wegschrijven.
Hoewel de website erg licht is voor wat betreft de hoeveelheid JavaScript die gebruikt wordt in de browser, gebruiken we het wel veel wanneer we data ergens voor nodig hebben (bijvoorbeeld om de data voor de pagina’s op te halen). JavaScript gebruik je in deze opzet dus voornamelijk om data ergens vandaan te halen of om een externe service te gebruiken.
Api's gebruiken we in deze onder andere om data op te halen uit het CMS. Echter, we gebruiken ze ook (middels een serverless function) om bijvoorbeeld de data uit formulieren te verwerken. API's gebruik je in een headless opzet dus om data op te halen of om te praten met externe services (zie ook de codesnippets bij 'Content ophalen vanuit een headless CMS').
De data die je binnenhaalt moet natuurlijk ook getoond worden op de pagina. Dit is waar het markup gedeelte van pas komt. We hebben HTML templates gebouwd voor elk component. Elk component krijgt dan simpelweg een stukje data mee die je dan kan gebruiken binnen die template. In Nunjucks werkt dat als volgt:
Omdat we dus een statische website hebben verkrijgen we allereerst alle content pre-build (hierover later meer). Voor het verkrijgen van de data maken we gebruik van de Storyblok API. We doen simpelweg een request naar de Storyblok API als volgt: