{"componentChunkName":"component---src-templates-post-index-js","path":"/nl/blog/wat-is-jamstack/","result":{"data":{"site":{"siteMetadata":{"logo":"https://content.afosto.io/5719193282412544/brand/AFO-Logo-compleet-kleur-RGBat4x.png","siteUrl":"https://afosto.com","siteName":"Afosto.com","twitter":"https://twitter.com/afosto","facebook":"https://twitter.com/afosto","company":{"foundingDate":"2014","founders":["Tjeuke horsten","Peter Bakker"],"phoneNumber":"050 711 95 19","email":"support@afosto.com"},"address":{"streetAddress":"Kieler Bocht 15C","locality":"Groningen","region":"GR","postalCode":"9723 JA","country":"NL"}}},"strapi":{"blog":{"title":"Wat is Jamstack?","slug":"wat-is-jamstack","id":"49","locale":"nl-NL","localizations":[{"locale":"en","slug":"what-is-jamstack"}],"seo_title":"Wat is Jamstack? | Is het de toekomst van webdevelopment? ","seo_description":"Jamstack is een software architectuur patroon gebaseerd op client-side JavaScript, herbruikbare API's, en voorgebouwde Markup (JAM). Maar zal het de toekomst van ontwikkeling zijn?","reading_time":"00:06:00.000","published_at":"2022-07-20T11:20:52.753Z","author":"Ton Koop","updated_at":"2022-07-21T06:31:29.749Z","body":"Jamstack is de laatste tijd erg populair geworden onder de developers community. Heb je mensen er over horen praten en vraag je jezelf af wat het betekent of waar het over gaat? Lees dan deze blog om erachter te komen wat het is. \n\nIn deze blog zullen we je uitleggen wat Jamstack is en hoe je er je voordeel mee kunt doen.\n\n## Definitie Jamstack\n\n![](https://lh6.googleusercontent.com/hNSl0r5cl3Zo9LFp6hPi533wt3mJdROIpGacgJtpJtBue51yHkKAJVIS2Eqfd8gP2frRqVqzs7NcVuhm3i3OgEuCsKEA_ik8RlSOCgb1qv-VPmXwfkwDAHfu2xB-7S8aHQ9FnnLM-FqLnDOmwcvMEOef-0ox)\n\nJamstack is een manier van het samenstellen van de architectuur van de software. Het is gebaseerd op client-side JavaScript, herbruikbare API's, en pre-built Markup (JAM). Deze aanpak is bedacht om websites en applicaties te bouwen die verschillen van een website met een traditioneel CMS. Maar waarom is dit belangrijk?\n\nIn de traditionele vorm van web development wordt alles - de inhoud, het ontwerp, en de database, samen beheerd. En als gevolg daarvan is elk onderdeel van de website onderling afhankelijk.\n\nDe backend interface is waar de inhoud van de website wordt gemaakt en beheerd, terwijl de database de plek is waar de code op de server wordt opgeslagen. Telkens als de website bezocht wordt, wordt de pagina door de server in elkaar gezet en aan de gebruiker getoond.\n\nHoewel er fundamenteel niets mis is met deze aanpak (want hij is meestal nuttig), kent hij beperkingen op het gebied van functionaliteit en prestaties. Om dat op te lossen is Jamstack bedacht.\n\nJamstack biedt betere prestaties, beveiliging, en schaalbaarheid van websites in vergelijking met de traditionele aanpak. Het is gebouwd op veel bestaande tools en biedt een betere productiviteit voor de gebruikers. Jamstack websites maken bovendien geen gebruik van servers om de pagina's bij elke request van de client op te bouwen. In plaats daarvan gebruikt het in de cache opgeslagen pagina's/inhoud.\n\nEen statische website generator wordt gebruikt om de opmaak van de site klaar te zetten in de vorm van sterk geoptimaliseerde statische pagina's en elementen. Dan wordt het naar een Content Delivery Network (CDN) gestuurd, waar de inhoud geserveerd wordt. En als zodanig hoeft de server alleen iets te doen als er nieuwe wijzigingen in de inhoud of bestanden worden aangebracht.\n\n## Jamstack Architectuur\n\n![](https://lh5.googleusercontent.com/ZR8eF-DtYDo7oifqFsy9KKLmfUsO3sILOK3Yo09TQIJUjTGJzwPoOj1VJ0O9AJSoMIMz8p4AveRtlBreAa__zzokxSEc8A0fezxsobwAMWGOX4WjsG9t9j-clsEBdapX7FEiuZE3GhaZrKqssA2XESavIg4K)\n\nJamstack is geen specifiek framework of technologie, maar eerder een vorm van of benadering voor het bouwen van webapplicaties. Bij Jamstack websites zijn de code (JavaScript), de site infrastructuur (API's), en de inhoud (Markup) gescheiden.\n\nToen Jamstack werd bedacht, werd het ontworpen om web development zonder servers mogelijk te maken. Dat wil zeggen, om zoveel mogelijk taken van server-side naar de client-side te verschuiven en het aantal server-requests drastisch te verminderen.\n\nUiteindelijk resulteerde dit in betere prestaties en minder laadtijden wat door de server-requests veroorzaakt wordt.\n\nZoals we hierboven schreven zijn er drie componenten waarop Jamstack gebaseerd is. Hieronder bespreken we deze componenten:\n\n### Javascript\n\nAls je developer bent, zul je bekend zijn met Javascript en wat het doet. Javascript is een programmeertaal die gebruikt wordt om webpagina's interactief te maken. Zonder Javascript kunnen we geen interacties aan onze websites toevoegen, zoals het klikken op een knop, het verzenden van een formulier, enz.\n\nIn Jamstack is Javascript, in tegenstelling tot traditionele web-development, losgekoppeld van de inhoud. Daardoor heeft het alle vrijheid voor het optimaliseren van de prestaties. Bovendien kunnen Jamstack apps Javascript gebruiken om met achterliggende services te communiceren (via API's), wat de gebruikerservaring ten goede komt.\n\n### API's\n\nApplication programming interfaces (API's) worden gebruikt om te communiceren tussen 2 software componenten. Aanvankelijk waren API's ontworpen om tussen server-side toepassingen te worden gebruikt. Met de vooruitgang van Javascript werden web API's ontwikkeld. Met web-API's worden alle activiteiten naar de client-side verplaatst. Developers kunnen nu complexere apps bouwen dan vroeger. Er komen steeds meer retailers die hun producten en diensten via web-API's aanbieden.\n\nMet deze vooruitgang kunnen developers nu diensten als betalingen, authenticatie, beheer en gegevens bij andere tools neerleggen zodat ze niet alles meer zelf hoeven te doen.\n\n### Markup\n\nMarkup is het eerste deel van je website dat aan de klant wordt geserveerd. Het kan handgeschreven of gecompileerde HTML code zijn. Bij Jamstack websites wordt de HTML niet vanaf een server gerenderd, maar statisch geserveerd.\n\nStatische site generatoren zoals Gatsby, Next.js, Hugo, Jekyll, enz., genereren statische HTML bestanden tijdens het 'build' proces. Dit proces verlaagt de kosten, complexiteit, en risico's van dynamische servers.\n\n![](https://lh5.googleusercontent.com/1D7G-Zp5t5Dj9CgiQw7Bk-bg1n2yYeNNi4g3Mmvr0SmyCjncIrketSn4Xatt6P-9Se0R77ZlufzQ6zCpR2Y79_3ufVST5JkD2hU8KjOibqU4DboZsATK2cRmy4ZP10l0ouBI33jY-DvBt2dVmqlNJO3nxus5)\n\nMet Jamstack wordt de inhoud aan een Content Delivery Network (CDN) geleverd en dynamisch gemaakt met API's en serverless functies. De technologieën en tools die betrokken zijn bij het opzetten van Jamstack applicaties zijn CDNs, headless CMSs, static site generators, en JavaScript frameworks.\n\n## Jamstack de naam\n\nMatt Biilmann en Chris Bach bedachten de naam \"Jamstack\" (aanvankelijk JAMstack) omdat ze een naam wilden geven aan een andere aanpak voor het bouwen van statische websites. De naam werd bedacht tijdens het ontwikkelen van moderne web-development-workflows en functies bij Netlify. Om het gemakkelijker te maken de architectonische aanpak te bespreken waarin verschillende reeds bestaande web tools zijn geïntegreerd, bedachten ze het woord Jamstack.\n\n## Wat zijn de voordelen van Jamstack?\n\nJamstack websites hebben verschillende voordelen ten opzichte van de traditioneel gebouwde websites. Hier zijn er een paar:\n\nVeiligheid: Omdat de client-side en server-side gescheiden zijn, zullen eventuele beveiligingsproblemen in de frontend code niet leiden tot een inbreuk in de backend. Daarnaast hoef je je geen zorgen te maken over kwetsbaarheden in de database of op de server omdat je website server-loos is.\n\nSchaalbaarheid: Met Jamstack is schaalbaarheid gemakkelijk en betaalbaar. Je web inhoud wordt geserveerd via CDN, en je hoeft weinig rekening te houden met servers of databases. Er ontstaan dus geen problemen, zelfs niet als er massaal verkeer naar je website komt.\n\nVerbeterde prestaties: Websites die met Jamstack gebouwd zijn bieden bezoekers supersnelle laadtijden. Dit omdat ze niet afhankelijk zijn van servers of databases. De meeste dingen die normaal nodig zijn bij het genereren van een webpagina worden omzeild omdat de inhoud in de cache van een CDN staat.\n\nOnderhoudbaarheid: Bij Jamstack websites hoef je geen server te onderhouden omdat je bestanden er niet worden opgeslagen. Je statische website wordt zonder gedoe voor je onderhouden.\n\nVerbeterde ervaring voor ontwikkelaars: Ontwikkelaars kunnen hun favoriete tech stack kiezen zonder tot een bepaalde technologie beperkt te zijn.\n\n## Jamstack voor e-commerce oplossingen\n\nAls gevolg daarvan worden ze geconfronteerd met zorgen over hoe ze een betere klantervaring kunnen bieden, hun verkeer kunnen vergroten, nieuwe functies kunnen inbouwen, en nog veel meer. Gelukkig kunnen deze problemen opgelost worden met Jamstack e-commerce.\n\nMet het toenemend aantal online winkels moeten retailers concurreren om relevant te blijven en aan de niet aflatende eisen van hun klanten te voldoen. Als gevolg daarvan worden ze geconfronteerd met zorgen over hoe ze een betere klantervaring kunnen bieden, hun verkeer kunnen vergroten, nieuwe functies kunnen inbouwen, en nog veel meer. Gelukkig kunnen deze problemen opgelost worden met Jamstack e-commerce.\n\nHieronder staan een paar oplossingen die Jamstack biedt voor online winkeliers:\n\nFlexibiliteit: Omdat de client en server kanten gescheiden zijn in een Jamstack e-commerce app, is er de vrijheid om je goederen op meerdere e-commerce platforms tegelijk te verkopen.\n\nUnieke winkelervaring: Met Jamstack kun je gepersonaliseerde winkelervaringen voor je kopers creëren, zodat je uniek kunt zijn. Shopify biedt bijvoorbeeld Javascript SDK's die gebruikt kunnen worden om een gebruiksvriendelijke ervaring te creëren.\n\nVerbeterde developer experience: Ontwikkelaars hoeven geen full-stack experts te zijn om Jamstack e-commerce toepassingen te bouwen. Ze kunnen API's van e-commerce oplossingen als Shopify gebruiken terwijl ze zich concentreren op het ontwerpen van de websites. Er is dus minder kosten en tijd nodig voor de ontwikkeling.\n\n## Jamstack tools om mee aan de slag te gaan\n\nHieronder staan de tools die je kunt gebruiken om je Jamstack toepassingen te bouwen:\n\nStatic Site Generators (SSG's): Deze hulpmiddelen worden gebruikt om statische HTML pagina's te genereren. Voorbeelden van populaire SSG's zijn - Gatsby](https://www.gatsbyjs.com/), [Hugo](https://hugotech.co/), [Jekyll](https://jekyllrb.com/), [Next.js](https://nextjs.org/), and [Eleventy](https://www.11ty.dev/).\n\nHosting diensten: Deze diensten stellen je in staat je applicatie op het internet te publiceren - [Firebase](https://firebase.google.com/), [Netlify](https://www.netlify.com/), [AWS Amplify](https://aws.amazon.com/amplify/), [GitHub Pages](https://pages.github.com/), [Heroku](https://www.heroku.com/).\n\nHeadless CMS: Headless CMS tools zijn content beheersystemen waarmee je je inhoud op één plek kunt beheren en die over je gewenste frontend interface kunt inzetten. Voorbeelden zijn [Strapi](https://strapi.io/), [Contentful](https://www.contentful.com/), [GetPlate](https://www.getplate.com/), [Netlify CMS](https://www.netlifycms.org/), and [CloudCanoon](https://cloudcannon.com/).\n\nNo-code formulieren: Maak interactieve formulieren zonder een stukje code te schrijven met [Google Forms](https://docs.google.com/forms/), [Formstack](https://www.formstack.com/), [JotForm](https://www.jotform.com/), and [Typeform](https://www.typeform.com/).\n\nUser authenticatie: Je kunt de volgende websites gebruiken om gebruikers op je Jamstack websites te authenticeren: [Auth0](https://auth0.com/), [Firebase](https://firebase.google.com/), [Netlify Identity](https://www.netlify.com/blog/2021/12/30/manage-and-authenticate-users-with-netlify-identity/), and [Cloudflare Access](https://www.cloudflare.com/products/zero-trust/access/).\n\nE-commerce: Je kunt de volgende tools gebruiken om een e-commerce shop op te zetten: [Shopify](https://www.shopify.com.ng/), [Snipcart](https://snipcart.com/), [and Afosto](https://afosto.com/).\n\n## Jamstack Sites / Voorbeelden\n\nHieronder staan voorbeelden van websites die volgens het Jamstack architectuurpatroon zijn gebouwd.\n\n-   [Azalp](https://www.azalp.nl): Gebowud met Next.js.\n\n-   [DiamondsByMe](https://diamondsbyme.com): Gebouwd met Next.js.\n\n-   [freeCodeCamp](https://www.freecodecamp.org/): Gebouwd met Gatsby.\n\n-   [HoodieHut](https://www.hoodiehut.co.uk/): Gebouwd met Gatsby.\n\n-   [Sprucehill](https://sprucehill.ca/): Gebouwd met Gatsby\n\n\n\n\n\n\n\n\n\n\n\n\n\n","primary_image":{"url":"https://qcqcdn.com/afosto/Frame_3480_5176c91245/Frame_3480_5176c91245.jpg"},"blocks":[{"title":"Wat is Jamstack?","contents":[{"body":"Jamstack is een manier van het samenstellen van de architectuur van de software. Het is gebaseerd op client-side JavaScript, herbruikbare API's, en pre-built Markup (JAM). Deze drie componenten kunnen onafhankelijk van elkaar opereren en daardoor verschilt dit van architectuur met een traditioneel CMS."}]},{"title":"Jamstack vs Wordpress","contents":[{"body":"Wordpress is een traditioneel CMS en Jamstack is een moderne manier van het samenstellen van je softwarepakket. Met Jamstack ben je niet afhankelijk van 1 systeem zoals met Wordpress. Met de Jamstack filosofie wordt content via Javascript en API's opgehaald en klaargezet als pre-built Markup. "}]}]}}},"pageContext":{"slug":"/nl/blog/wat-is-jamstack/","id":49,"locale":"nl-NL"}},"staticQueryHashes":["4130126704","494587200"]}