Development

Headless & Static: de Jamstack

Performance (snelheid) en flexibiliteit op het gebied van development en content beheer zijn voor ons belangrijke pijlers. Het gebruik van een Headless CMS en Static development is in onze ogen hiervoor de beste keuze.

Waarom Headless en Static?

Het voordeel van Headless en Static ook wel pre-generated websites genoemd ligt in meerdere onderdelen. De belangrijkste voordelen zijn performance, schaalbaarheid en veiligheid.

Bij de "traditionele" architectuur van een website zoals bijvoorbeeld Wordpress draait deze applicatie continue op een server. Dit vergt onderhoud aan de server (tijd), is gevoelig voor hacks, en kostbaar om te op te schalen.

Bij een Headless CMS wordt de hosting en beveiliging uitbesteed, deze wordt dan ook alleen uitgelezen bij het genereren van je website (bij aanpassingen), is makkelijk schaalbaar en er zijn geen servers in beheer.

Dit zorgt voor een sneller website door pre-generation, is veiliger door minder "points of attack", schaalbaar en goedkoop (de services waarop de pre-generated websites op gehost worden zijn laag in kosten) en de developer experience is een stuk beter wat zorgt voor sneller en dus voordeliger ontwikkelen.

Jamstack
Deze technische architectuur wordt ook wel de Jamstack genoemd. Dit is een verzamelnaam voor de gebruikte technologieën Javascript, API, Markup. Waarin Javascript gebruikt wordt voor de dynamische functionaliteit, API de bron van de content (CMS) en Markup de statische HTML bestanden vormen van je website (pre-generated).

Headless CMS

Een Headless CMS is een CMS dat los staat van de rest van de gebruikte technologieën. Om Wordpress het meest bekende CMS als voorbeeld te nemen waarbij het front-end, het deel wat bezoeker ziet, binnen de zelfde applicatie / codebase valt is dat bij een Headless CMS niet het geval. Die staan los van elkaar. Dit geeft developers vrijheid en zijn daarmee niet gebonden aan de conventies die Wordpress van je vereist.

Doordat developers nu vrij zijn in de keuze qua technologie voor het bouwen van de website (wij gebruiken Nuxt.js) ontstaat er meer snelheid. Deze technologieën zijn een stuk verder ontwikkeld voor de eisen die een website vandaag de dag hebben.

De mogelijkheden met een Headless CMS zijn net zo breed als bij traditionele CMS systemen. Wij ervaren een Headless CMS zelfs als meer flexibel en sneller op te tuigen naar wens en in te richten specifiek naar de eisen van het design van een website.

Statische Websites

In het vorige deel is al kort beschreven dat developers los staan in de keuze voor de te gebruiken techniek voor het front-end. De moderne frameworks die beschikbaar zijn voor het front-end hebben veel optimalisatie ondersteuning op het gebied van performance waaronder pre-generation wat resulteert in een statische website files.

We hebben al een paar keer eerder de term statische websites laten vallen, tijd om er iets verder in te duiken om te begrijpen wat dit nou precies is en doet.

Zo een modern front-end framework genereert volledige statische HTML websites. Het leest de juiste data uit het CMS uit en gebruikt de bijbehorende templates om de bestanden te genereren. Deze bestanden worden dan kant en klaar geplaatst op een hosting server bijvoorbeeld bij Netlify of Vercel.

Het grootste verschil met de traditionele manier is dat bij het bezoeken van een pagina nu een aantal stappen worden overgeslagen. Zo wordt niet de data eerst uit de database gelezen, de templates hoeven niet meer opgebouwd te worden en er is geen overtollige code die uitgevoerd wordt. Kortom, de volledige pagina's staan allemaal reeds klaar en worden sneller geladen!

Deze website maakt gebruik van cookies voor het analyseren van gebruikersgedrag.