Waarom Jamstack?

Kiezen voor architectuur van Jamstack levert tal van voordelen op, zowel voor sites, applicaties als de workflow van projecten. De belangrijkste:

• Snellere en betere prestaties
  Jamstack presenteert vooraf gemaakte content en middelen via een Content Delivery Network (CDN). Dat heeft een positief effect op de laadsnelheden, die op hun beurt de gebruikerservaring, conversie en andere SEO factoren beïnvloeden. Met een Jamstack-site is het niet nodig om een paginaweergave op verzoek te genereren, want dit is tijdens het bouwproces (een build) al gedaan. Het resultaat: supersnelle laadtijden en topprestaties, zonder dat een dure of complexe infrastructuur nodig is.
  
  

• Veiliger
  Internet kán een gevaarlijke plek zijn. Maar met een Jamstack-site heb je veel minder zorgen over server- of databasekwetsbaarheden. Jamstack verwijdert kwetsbaarheden uit de hostinginfrastructuur. Dat zorgt voor minder doelwitten, een stevig schild en systemen die bestand zijn tegen aanvallen.
  
  Door pagina's en bronnen als vooraf gegenereerde bestanden te presenteren, is het met alleen-lezen-hosting mogelijk de aanvalsvectoren nog verder te verminderen. Ondertussen kunnen dynamische tools en diensten worden geleverd door leveranciers met teams die zich toeleggen op het beveiligen van hun specifieke systemen en het leveren van een hoog serviceniveau.
  
  

• Goedkopere hosting
  De hosting van statische bestanden is goedkoop of zelfs gratis.
  
  

• Betere ontwikkelaarservaring
  Front-end ontwikkelaars kunnen doen waar ze goed in zijn: zich concentreren op de front-end. Ze zijn niet gebonden aan een monolithische architectuur. Dit betekent meestal een snellere en meer gerichte ontwikkeling.
  
  

• Schaalbaarheid
  Het kan zomaar gebeuren: een website, pagina of video die viraal gaat. Dat vraagt veel van je bronnen. Een CDN laat in dat geval vraag en aanbod perfect op elkaar aansluiten, en voorkomt overbelasting.
  
  Populaire architecturen kun je vergelijken met verkeersregelaars. Ze leiden drukte in goede banen door logica en structuur toe te voegen. Daarmee plaatsen ze populaire weergaven en bronnen in de cache, zodat ze altijd stand-by staan. Bij Jamstack is dit standaard. Bij het bedienen van een site volledig vanuit een CDN, is er geen complete logica of workflow die bepaalt welke activa in de cache kunnen worden opgeslagen en wanneer.
  
  Met Jamstack-sites cache je alles in een CDN. Met eenvoudigere implementaties, ingebouwde redundantie en ongelooflijke laadcapaciteit. De resultaten zullen je positief verrassen!
  
  

• Minder onderhoud
  Bij het verminderen van de hostingcomplexiteit heeft een site ook minder onderhoud nodig. Een vooraf gegenereerde site, die je rechtstreeks vanaf een eenvoudige host of CDN bedient, heeft geen team van experts nodig om in de lucht te blijven: het werk zit in de bouwfase. Vanaf oplevering is de site stabiel en is het mogelijk deze te hosten zonder servers die intensieve aandacht en regulier onderhoud vragen.
  
  

• Portability
  Jamstack-sites zijn vooraf gegenereerd. Dat betekent dat je ze kunt hosten vanaf tal van hostingservices. En dat je ze gemakkelijker naar de host van je voorkeur verhuist. Wel zo gemakkelijk.
  
  

• Eenvoud
  De beste producten en services zijn supersimpel in gebruik, ondanks de onderliggende complexiteit. Moderne auto’s zijn redelijk eenvoudig te bedienen, maar onder de motorkap schuilt technologie die allesbehalve eenvoudig is. De nieuwe iPhone? Makkelijk en intuïtief in gebruik, maar zeer complex van binnen.
  
  Het lukt leveranciers van digitale platforms helaas niet om die complexiteit weg te nemen in de mate die de eindgebruikers van deze producten wensen. En eerlijk is eerlijk: dat is ook de Jamstack-beweging nog niet helemaal gelukt. Maar de toekomst ziet er veelbelovend uit met bedrijven als Stackbit, Netlify, Kentico Kontent, Contentful. Zij introduceren producten die de complexiteit minimaliseren.

Optimale Page Experience

Pagina-ervaring is een verzameling criteria die meet hoe gebruikers de interactie met een webpagina ervaren. Dit gaat verder dan alleen de inhoud ervan. De volgende standaarden zijn essentieel voor het leveren van een goede pagina-ervaring:

• Mobielvriendelijk
  Een responsief ontwerp dat zich aanpast aan het scherm is geen mooie, luxe optie meer. Het is keiharde eis vanuit het perspectief van zowel gebruikers als zoekmachines. Gebruik de mobielvriendelijke test van Google of controleer je Google Search Console onder Verbeteringen > Mobiele bruikbaarheid om te zien hoe je op dit terrein scoort.

  Nu Google in het voorjaar van 2021 mobile-first indexering introduceerde voor alle websites, is het belangrijk dat je website perfect te zien is op meerdere schermen. Maar het is ook belangrijk dat je site een gemakkelijk toegankelijke mobiele versie heeft zodat Googlebot probleemloos kan crawlen en indexeren.
  
  

• Veiligheid
  Cybercriminelen worden steeds slimmer. Daarom is het essentieel om je website veilig te houden. Om die reden moet je regelmatig alle websitebestanden scannen. Zo vind en verwijder je schadelijke software.

  Ook het regelmatig scannen en tijdig updaten van al je website-onderdelen is essentieel. WordPress-gebruikers doen dit door de kerninstallatie, plug-ins en thema’s op tijd te updaten. En door bekende en potentiële serverbeveiligingsproblemen zo snel mogelijk op te lossen.

  
  De beste manier om te controleren of er problemen zijn met veilig browsen, is door Google Search Console te gebruiken.

  Klinkt allemaal behoorlijk onheilspellend, maar we hebben ook goed nieuws: met Jamstack vormt je site een veel kleiner doelwit. Met een Jamstack-website heb je een duidelijke scheiding van services. De front-end en back-end zijn losgekoppeld en je vertrouwt op API's om serversideprocessen uit te voeren. Hiermee is een veel kleiner oppervlak vatbaar voor kwaadwillende aanvallen.
  
  

• HTTPS
  De privacy en veiligheid van gebruikers staan ​​voorop. HTTPS helpt voorkomen dat iemand knoeit met de communicatie tussen je website en de browser van de bezoeker. HTTPS is al een ranking-criterium sinds 2014. Met Jamstack heeft het een nieuwe rol als onderdeel van pagina-ervaringssignalen, wordt het belang ervan benadrukt en zelfs verstevigd.

  Hier moet je aan twee dingen denken. Allereerst: wordt je website bediend via HTTPS? En verwijst je website correct door naar HTTPS? Als je dat nog niet hebt gedaan, schakel HTTPS dan zo snel mogelijk in op je server. Gebruik tools zoals SEMRush of Ahrefs of Screaming Frog SEO Spider om te controleren of omleidingen van HTTP naar HTTPS correct zijn geïmplementeerd.
  
  

• Opdringerige interstitials
  Weinig mensen worden gelukkig van pop-ups. Toch willen we niet beweren dat je ze niet moet gebruiken. Maar doe het wel verantwoord! Zorg er wel voor dat pop-ups en interstitials (zoals die die je gebruikt voor leeftijdsverificatie, cookiegebruik, AVG-compliance, enz.) de inhoud van websites niet volledig blokkeren (vooral op mobiele schermen). Houd daarom de lay-out intact en veroorzaak geen hinder op de pagina. Dat is een reden om je site niet meer te bezoeken.
  
  

• Meer grip met Core Web Vitals
  Het doel en het idee van Core Web Vitals is om je degelijke, meetbare proxy's voor Real User Experience/Metrics (RUM) te geven. Hiermee heb je houvast voor het verbeteren van je websiteprestaties en UX.

De Core Web Vitals bestaat uit drie factoren: laadprestaties, interactiviteit en visuele stabiliteit van de pagina, gemeten door drie metrieken LCP, FID en CLS.

• Largest Contentful Paint (LCP) meet de laadsnelheid. Dat wil zeggen: hoe lang duurt het voordat het grootste element boven de vouw op het scherm wordt weergegeven? In de meeste gevallen is dit een afbeelding/video van een held of het hoofdtekstblok op de pagina.

• First Input Delay (FID) meet de responsiviteit van een pagina. In andere woorden: hoe lang duurt het voordat een element reageert wanneer de bezoeker een interactie ermee probeert aan te gaan (denk aan de mogelijkheid om op een link te klikken of een formulier in te vullen)?

• Cumulatieve lay-outverschuiving (CLS) meet hoe stabiel je paginalay-out is terwijl deze wordt geladen. Weet je wanneer je een pagina invoert en dan ineens tekst die voorheen in het midden van een pagina stond eronder verschuift? CLS-scores meten de impact die de verschuiving heeft op het kijkvenster.

Wanneer niet kiezen voor Jamstack?

Er zijn veel redenen om te kiezen voor Jamstack, maar ook een aantal om er niet voor te kiezen:

• Jamstack is niet voor beginners
  Jamstack is vriendelijk voor ontwikkelaars. Maar als je geen developer bent, is Jamstack lastig te begrijpen. Kennis van development in het algemeen of specifiek (zoals React of Vue) is nodig om goed met Jamstack uit de voeten te kunnen. Er zijn gelukkig wel hulpmiddelen: je kunt een eindproduct, website of app bouwen dankzij de tools die door de community beschikbaar gesteld worden (te vergelijken met WordPress-plug-ins). Wij gebruiken veelal Storyblok als CMS, hierdoor kunnen we gemakkelijk previews zien en dat is zeer content editor vriendelijk.
  
  Er zijn data die lastig vooraf te genereren zijn. Denk hierbij aan een naam, avatar, adres of mailadres. Of Jamstack een slimme keuze is, hangt sterk af van je gebruiksdoel. Voor simpele projecten, zoals e-commerce, is het ophalen van bepaalde informatie uit een API eenvoudig.
  
  

• Complexiteit van de API
  Dit nadeel heeft ieder ecosysteem. Het kan overweldigend zijn om te werken met een API, ongeacht het ecosysteem. Het verschil bij Jamstack is dat het productieproces niet vastloopt op het moment dat de API niet gebruikt kan worden. Bij WordPress kan dat wel het geval zijn.
  
  

• Duur van de build
  Een van de belangrijkste beperkingen is de bouwtijd voor websites met een groot aantal pagina's. Het is altijd nodig om de hele website te herbouwen, ook al is er maar één pagina aangepast. Dit kan een probleem zijn met grote websites. Er zijn al oplossingen voor dat probleem: met incrementele builds kun je alleen de specifieke - dus aangepaste - pagina's opnieuw opbouwen. Zo hebben Gatsby en NextJS deze oplossingen al. Wij gebruiken zelf Storyblok vaak, omdat hier een preview-functie in zit.
  
  

• Omgaan met dynamische onderdelen (cloudfuncties)
  Jamstack betekent niet dat je een back-end wegdoet. Precies het tegenovergestelde is waar! Een belangrijk onderdeel van de Jamstack-aanpak is serverloze functies. Deze zijn in de loop van de tijd ook beter geworden! Tegenwoordig kunnen serverloze functies on-edge worden uitgevoerd, zoals de statische bestanden die worden bediend via een CDN.
  
  Dit betekent dat back-end delen van de website/app niet alleen bijna oneindig geschaald kan worden en er nauwelijks onderhoud nodig is, maar gebruikers zullen ook in staat zijn om back-end data op te halen bij het dichtstbijzijnde datacenter.

Jamstack-begrippenlijst

• Pre-rendering
  Met Jamstack is de volledige front-end tijdens een bouwproces vooraf ingebouwd in sterk geoptimaliseerde statische pagina's en assets. Dit proces van pre-rendering resulteert in sites die direct vanaf een CDN kunnen worden bediend, waardoor de kosten, complexiteit en risico's van dynamische servers als kritieke infrastructuur worden verminderd.
  
  Met zoveel populaire tools voor het genereren van sites, zoals Gatsby, Hugo, Jekyll, Eleventy, NextJS en nog veel meer, zijn veel webontwikkelaars al bekend met de tools die nodig zijn om productieve Jamstack-ontwikkelaars te worden.
  
  

• API
  Application Programming Interface. Het definieert interacties waardoor twee applicaties met elkaar kunnen communiceren.
  
  

• API Economy
  Een term die de diepte en breedte is gaan betekenen van API's die beschikbaar zijn voor ontwikkelaars om in het huidige landschap te gebruiken.
  
  

• Atomic deploys
  Het woord ‘atomic’ wordt gebruikt om implementaties te beschrijven die geen tussentijdse status of onderhoudsperiode bevatten. Met atomaire implementaties worden alle code, activa en configuratie van een site in één keer bijgewerkt, zodat een website niet in een gedeeltelijk bijgewerkte staat kan worden weergegeven.
  
  Hoewel het implementeren en bijwerken van sites via FTP ooit populair was, zou dit ertoe leiden dat sommige bijgewerkte bestanden op de server aanwezig zijn en klaar zijn om te worden gebruikt terwijl andere nog onder constructie of onderweg zijn. Moderne platforms vermijden deze situatie door atomaire implementaties te bieden waarbij de nieuwe versie van de site pas verzoeken begint te ontvangen wanneer alle activa en configuraties beschikbaar zijn. Zie ook Onveranderlijke implementaties.
  
  

• CDN (Content Delivery Network)
  Een gedistribueerd netwerk dat is geoptimaliseerd voor het aanbieden van content aan gebruikers. Door geografisch gedistribueerd te zijn, kan een CDN redundantie bieden en ook de leveringsprestaties verbeteren als gevolg van serviceverzoeken van de infrastructuur die zich het dichtst bij de gebruiker bevindt die het verzoek doet.
  
  

• Client render
  Om de weergave van inhoud in de browser te genereren met behulp van JavaScript. Dit houdt vaak in dat gegevens naar de browser worden verzonden in plaats van markeringen die klaar zijn voor weergave door de browser, en vervolgens JavaScript gebruiken om die gegevens om te zetten in een weergave door de DOM te wijzigen.
  
  

• Decoupling
  Ontkoppeling is het proces van het creëren van een schone scheiding tussen systemen of services. Door de services die nodig zijn om een site te exploiteren los te koppelen, kan elk onderdeel gemakkelijker worden beredeneerd, kan het onafhankelijk worden verwisseld of geüpgraded en kan het worden toegewezen aan toegewijde specialisten binnen een organisatie of aan een derde partij.
  
  

• Headless technology
  De term ‘headless’ verwijst naar het wegnemen van de afhankelijkheid van weten waar gegevens worden weergegeven én in plaats daarvan alleen de gegevens vasthouden die kunnen worden gebruikt waar de ontwikkelaar maar wil. Dit wordt vaak gebruikt om een CMS te beschrijven waar inhoud kan worden ingevoerd en vastgehouden, waarna afzonderlijk wordt besloten waar en hoe die inhoud wordt weergegeven.
  
  

• Microservice
  Een programmeerparadigma waarbij veel onderdelen van een grote applicatie worden opgesplitst in verschillende eenheden met een kleinere verantwoordelijkheid. We kunnen hiervoor Serverless of API's gebruiken, maar het is niet zo dat API's of Serverless per se Microservices zijn. We hebben opgesplitst waartoe we toegang willen hebben, en die modulariteit noemen we Microservices.
  
  

• Pre-render / Pre-generate
  Dit wordt gebruikt om de opmaak te genereren die een weergave vertegenwoordigt voordat deze nodig is. Dit gebeurt tijdens een build in plaats van on-demand, zodat webservers deze activiteit niet voor elk ontvangen verzoek hoeven uit te voeren. Snellere laadtijden zijn hier een gevolg van.
  
  

• Server render
  Om opmaak op de server te genereren in plaats van op de client. Serverweergave verwijst meestal naar het proces dat plaatsvindt op het moment van het verzoek, in plaats van tijdens het bouwen. Sommigen gebruiken deze term als een verzamelnaam voor elke weergave die op een server plaatsvindt, en daarom is ondubbelzinnig maken vaak verstandig.
  
  

• Serverless
  Serverloze functies zijn een manier om een runtime-omgeving voor code te bieden zonder de noodzaak van kennis van of controle over de onderliggende omgeving. Het maakt gebeurtenis-gestuurde logica op de server mogelijk zonder infrastructuur op te zetten.
  
  Veelvoorkomende verwarring over de term komt voort uit de observatie dat ‘er nog ergens een server is’, wat waar is, maar er zijn geen servers aanwezig in de probleemruimte van degenen die met serverloze functies werken. Op een vergelijkbare manier heeft een draadloze router draden voor stroom en connectiviteit, maar er zijn geen draden in het domein van de apparaten die een draadloze router gebruiken om verbinding te maken met internet.
  
  

• Static site generator
  Een tool die kan worden uitgevoerd als onderdeel van een build om inhoud, gegevens en sjablonen om te zetten in bestanden die kunnen worden geïmplementeerd in een hostingomgeving als een kant-en-klare website. Vind een meer gedetailleerde beschrijving in dit artikel: wat is een statische sitegenerator? En drie manieren om de beste te vinden.