Wat is de Jamstack en hoe werkt het?

De snelheid van je website heeft aantoonbaar invloed op het aantal conversies dat je behaalt. Probeer je jouw website te versnellen door puur statische HTML-bestanden te gebruiken, dan leverde je voorheen veel functionaliteit in. Inmiddels kun je echter veel technieken inzetten om het beste van beide werelden te krijgen. Laten we eens kijken naar de nadelen van dynamische websites en de Jamstack als alternatief.

WordPress is één van de meest populaire applicaties op ons platform. Het biedt volop mogelijkheden voor een blog of een uitgebreide website. Toch is de combinatie van WordPress, PHP en MySQL niet de allersnelste. Je kunt je website nog sneller maken door alleen maar statische HTML te tonen. Met statische HTML bedoel ik simpelweg HTML-bestanden op je hostingpakket. Graag vertel ik over de achterliggende concepten om dit te verduidelijken.

Een stukje geschiedenis

Vroeger bestond het internet geheel uit statische HTML. Het systeem was bedoeld om tekstuele informatie publiekelijk beschikbaar te maken. Naar gelang het web meer werd gebruikt, kwam er ook meer functionaliteit bij. Gebruikers wilden steeds dynamischere en mooiere websites. Afbeeldingen, JavaScript en CSS werden daarom steeds meer ingezet.

De oplossing voor meer dynamiek was om HTML niet als bestanden op de server op te slaan, maar om de server op aanvraag pagina’s te laten generen. Dit gebeurde via de Common Gateway Interface (CGI). In essentie was CGI een methode voor webservers om programma’s uit te voeren en de uitvoer ervan direct naar de gebruiker te sturen.

CGI had wel een aantal problemen. Zo was het niet erg veilig, nogal traag en bovendien lastig in het gebruik. De oplossing? PHP! Deze programmeertaal is speciaal gemaakt om websites te produceren en draait in de webserver. Het is dus geen extern programma dat wordt aangeroepen.

Voor- en nadelen van WordPress

Een voorbeeld van een typische PHP-applicatie is een WordPress-website. WordPress stelt je in staat om snel een moderne en dynamische blog te maken. Er zijn veel templates en plugins die je kunnen helpen om precies te krijgen waar je naar op zoek bent. Daarnaast is het uitgebreide dashboard van WordPress erg handig om artikelen te schrijven en je blog te beheren.

Er zijn echter ook problemen, met name bij grote installaties. Denk aan blogs met flink veel content of bezoekers. Alle content van een WordPress-blog komt uit een database, doorgaans MySQL. Dat maakt het heel gemakkelijk om blogartikelen aan te passen en andere dynamische elementen te gebruiken. De combinatie van PHP en MySQL zorgt alleen wel voor extra belasting op de server (vergeleken met statische HTML-bestanden). Dat resulteert weer in dat een blog soms wat trager laadt. Let wel, we hebben het hier over tienden van seconden. Hebben we het over conversies, dan telt echter elke milliseconde!

Daarnaast is WordPress een behoorlijk complexe applicatie, ook al heb je zelf niet zoveel met die complexiteit te maken. Dit zorgt tevens voor een groter risico op beveiligingsproblemen. Wij proberen die risico’s proactief voor je weg te nemen met behulp van geavanceerde beveiligingssoftware als Patchman, maar voorkomen is natuurlijk altijd beter dan genezen. Ook hier geldt weer dat statische HTML deze kwetsbaarheden niet heeft.

Vooral als je een website met veel content of bezoekers hebt, kun je tegen deze problemen oplopen. Zoals ik al noemde, is een statische website een mogelijke oplossing. Alleen, WordPress biedt natuurlijk veel opties voor beheer en dynamische content. Eigenlijk zou het het mooist zijn als er een oplossing is die net zo snel is als statische HTML, maar met dezelfde opties voor dynamische content (zoals reacties en reviews) en beheer als WordPress.

Wat is de Jamstack?

Om het beste van beide werelden te combineren, kun je gebruikmaken van de zogenaamde Jamstack. De Jam staat voor JavaScript, APIs en Markup. Het is een concept en niet een specifiek product of project. Zie het als een set ideeën die je kunt gebruiken om een website te bouwen.

Het idee achter de Jamstack is om moderne tools in te zetten om een statische website te genereren die dynamische componenten bevat. Een belangrijk aspect hierbij is om zoveel mogelijk stappen in het proces te automatiseren, zodat het bij elke update van je website kan worden uitgevoerd. Zo heb je een statische website met dynamische componenten als eindresultaat.

JavaScript, APIs en Markup

Om dit abstracte verhaal wat concreter te maken, leg ik hieronder eerst de drie componenten (JavaScript, APIs en Markup) uit. Vervolgens kijken we naar de inzet van de Jamstack binnen de context van een WordPress-blog.

Markup

We beginnen achteraan, met Markup. Hiermee wordt elk systeem bedoeld dat we kunnen gebruiken om de opmaak van onze website te beschrijven. Meestal zal dit HTML zijn, maar je kunt ook gebruikmaken van bijvoorbeeld Markdown. Het Markup-deel van de Jamstack zorgt voor de lay-out van een website, maar niet voor de content. Die wordt ergens anders vandaan gehaald.

APIs

Een API is een Application Programming Interface. Kort gezegd is dat een set afspraken die gebruikt worden om verschillende systemen aan elkaar te koppelen. Een voorbeeld van een API is de WordPress API. Deze stelt externe systemen in staat om informatie en inhoud van je blogartikelen op te vragen in een formaat dat voor computers te begrijpen is.

In de Jamstack worden APIs voor twee doeleinden gebruikt. Ten eerste kan bij het genereren van de statische website-informatie uit een API gebruikt worden als content. Daarnaast kunnen APIs via JavaScript worden aangesproken in de browser om dynamisch gedrag aan de website toe te voegen.

Een goed voorbeeld van dat laatste punt is Disqus. Disqus is een webapplicatie die je kunt gebruiken om bezoekers reacties te laten plaatsen op je website. Zonder dat je daar zelf iets voor hoeft te doen – op een kleine beetje JavaScript toevoegen na. De berichten die je bezoekers achterlaten, worden opgehaald via de API van Disqus.

JavaScript

JavaScript is een programmeertaal die door alle browsers wordt ondersteund. Het is daarom geschikt om dynamische elementen op websites te maken. Het is mogelijk om via JavaScript een API aan te spreken om zo live content op je website te weergeven. Denk bijvoorbeeld aan het zojuist genoemde Disqus.

WordPress als statische website

Inmiddels weet je wat de voor- en nadelen zijn van een dynamische applicatie, zoals WordPress. Ook weet je waarom een website die alleen uit statische HTML-bestanden bestaat aantrekkelijk kan zijn. Combineer je beide, dan kom je tot een website die aan het volgende eisenlijstje moet voldoen.

• Snelheid | De website moet heel snel laden.
• Dynamisch | Het moet mogelijk zijn om dynamisch gedrag toe te voegen, zoals berichten van bezoekers of het verwerken van betalingen.
• Beheer | Het moet met een makkelijk te gebruiken inferface eenvoudig mogelijk zijn om zijn om nieuwe content toe te voegen of te wijzigen.

De Jamstack is zeer geschikt voor dit type websites. We hebben hier te maken met dynamische content (blogs en berichten van bezoekers) die niet continue aangepast worden. We kunnen dus periodiek (bij elke update van het blog) een nieuwe statische website genereren. Vervolgens gebruiken we JavaScript om via een API reacties van bezoekers toe te voegen, zoals die van Disqus.

Automatiseren met Gatsby

Automatisering is hierbij een belangrijk component. Elke keer als de lay-out van de website wordt aangepast, wil je dat er automatisch een nieuwe set statische HTML-bestanden naar het hostingpakket wordt geüpload. Tevens wil je dat dit ook gebeurt, wanneer een blog aangepast wordt via het dasbhoard van WordPress. We hebben hiervoor een tool nodig die ons helpt om:

• de opmaak van de website op te splitsen in herbruikbare componenten;
• tijdens het genereerprocess meta-informatie en de content van onze blogs op te halen via de WordPress API;
• op een makkelijke manier dynamisch gedrag aan de website toe te voegen, zoals Disqus-reacties.

Een dergelijke tool is Gatsby. Hiermee kun je gemakkelijk data uit verschillende bronnen gebruiken om statische websites te genereren. Doordat Gatsby voor het bouwen van de website van React gebruikmaakt, is het eenvoudig om herbruikbare componenten te bouwen die je op verschillende plekken op je website kunt inzetten. Er is zelfs een plugin beschikbaar voor Gatsby die via de WordPress API meta-informatie en content van je blogartikelen ophaalt.

Verder met de Jamstack

Combineer je Gatsby met bijvoorbeeld GitHub, dan kun je het proces om de statische website te generen en uploaden automatiseren. Daar wil ik je in de toekomst graag meer over vertellen. Hopelijk heb je voor nu in ieder geval een beeld gekregen wat de Jamstack is en hoe het probeert de voordelen van een dynamische website met die van een statische te combineren. In de tussentijd kun je ook eens naar WP2Static kijken als je WordPress gebruikt!

P.S. Blijf op de hoogte en volg ons via Facebook, X, Instagram, e-mail en RSS. Heb je vragen, tips of opmerkingen? Laat het achter als reactie. Vond je het artikel nuttig? Deel het dan met anderen!