{"id":29120,"date":"2020-01-13T02:59:31","date_gmt":"2020-01-13T10:59:31","guid":{"rendered":"https:\/\/kinsta.com\/?p=58518&preview=true&preview_id=58518"},"modified":"2023-10-20T11:02:00","modified_gmt":"2023-10-20T09:02:00","slug":"gatsby-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/gatsby-wordpress\/","title":{"rendered":"Inleiding tot het bouwen van websites met Gatsby en WordPress (snel en statisch)"},"content":{"rendered":"

Hoe ziet een typische dynamische website eruit, zoals bijvoorbeeld een die op WordPress draait? Dat ziet er ongeveer zo uit: wanneer een bezoeker een URL invoert in een browser of je website via een link bezoekt, dan wordt er een verzoek verzonden naar je webserver.<\/p>\n

De server verzamelt vervolgens alle benodigde gegevens door middel van database-query’s en genereert een HTML-bestand<\/a> waarmee jouw browser de site kan tonen. Een alternatief zijn statische sites die de responses al opgeslagen hebben. Deze bestanden kunnen dus rechtstreeks aan de bezoeker worden geleverd.<\/p>\n

Generators voor statische sites<\/a> bestaan al langer, maar ze zijn de laatste tijd in populariteit toegenomen. In deze stapsgewijze handleiding kijken we naar de integratie van WordPress met Gatsby<\/strong>, een tool die statische sites genereert.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Wat is Gatsby?<\/h2>\n

WordPress maakt dynamische websites en om dit voor elkaar te krijgen wordt er gebruik gemaakt van de stack van PHP<\/a>, MySQL<\/a> en Apache of Nginx<\/a>. Toch is het ook met WordPress mogelijk om een statische versie te cre\u00ebren door voor alle content van je site een lijst met HTML-pagina’s te genereren.<\/p>\n

Deze statische versie van WordPress wordt headless WordPress of serverloze<\/a> WordPress genoemd. Dit conversieproces wordt slechts \u00e9\u00e9n keer uitgevoerd, zodat dezelfde pagina aan meerdere bezoekers kan worden getoond. Maar hoe converteer je je WordPress-site naar een statische versie? Dit is waar Gatsby ten tonele verschijnt.<\/p>\n

Gatsby<\/a>, of ook wel GatsbyJS, is een generator voor statische sites die is gebouwd met ReactJS<\/a> en wordt aangedreven door GraphQL<\/a>. Met Gatsby kan iedereen feature-rijke, boeiende websites en applicaties maken. Gatsby haalt via GraphQL uit verschillende bronnen van je site gegevens op, waaronder bestaande websites, API-oproepen en platte bestanden. Vervolgens maakt de tool de statische sites op basis van door jou opgegeven configuratie-instellingen.<\/p>\n

Gatsby bestaat nog maar een jaar, maar heeft toch inmiddels al een grote schare gebruikers. Verschillende instellingen en freelancers maken namelijk al gebruik van Gatsby. De homepagina van de Data Science and Engineering Blog van Airbnb<\/a> draait op Gatsby – ook al zijn de blogartikelen zelf gehost op Medium.<\/p>\n

\"Engineering
Engineering & Data Science Blog van Airbnb<\/figcaption><\/figure>\n

Braun is een merk van het consumentengoederenbedrijf P&G. Hun Canadese site<\/a> wordt gehost met Gatsby, terwijl de zoekfunctie van de site wordt aangedreven door React.<\/p>\n

\"De
De Canadese website van Braun<\/figcaption><\/figure>\n

Ook gebruiken een aantal freelance ontwikkelaars<\/a> Gatsby voor hun portfolio’s<\/a>. Portfolio’s, zoals die van Jacob Castro<\/a>, bevatten voornamelijk statische content met links naar andere projecten en een contactformulier. Hierdoor zijn ze uiterst geschikt om als statische site gepresenteerd te worden.<\/p>\n

\"Portfolio
Portfolio van Jacob D. Castro<\/figcaption><\/figure>\n

Waarom zou je Gatsby gebruiken?<\/h3>\n

Snelle websites<\/strong>: het belangrijkste voordeel van het bouwen van een statische website met Gatsby is snelheid<\/a>, een metriek die veel webmasters proberen te optimaliseren sinds Google verkondigde dat het een factor is binnen hun zoekmachinerankings<\/a>. Laadtijden hebben daarnaast invloed op het aantal paginaweergaven en de conversiepercentages. Naar schatting kan een vertraging van \u00e9\u00e9n second in de laadtijd van een site leiden tot een vermindering van het aantal conversies met 7%<\/a>.<\/p>\n

Beveiliging<\/strong>: Ook zorgt een statische site voor betere beveiliging<\/a>. Omdat het slechts statische bestanden zijn die worden geleverd, kan er ook niet veel aan gehackt worden. Bovendien kan je de statische bestanden altijd opnieuw genereren als ze verloren gaan.<\/p>\n

Serverkosten<\/strong>: Voor het hosten van een dynamische site moet je server compatibel zijn met je technologiestack. Daarentegen kan je een statische site op vrijwel elke server hosten, wat de bijbehorende hostingkosten sterk vermindert.<\/p>\n

Het (opnieuw) genereren van een statische site met Gatsby vereist wel het gebruik van JavaScript, maar dit kan je ook op een lokale machine doen waarna je de statische bestanden kopieert naar de site.<\/p>\n

Waarom zou je Gatsby vermijden?<\/h3>\n

Ondersteunt geen dynamische content<\/strong>: Als je Gatsby wil gebruiken, moet je opnieuw nadenken over hoe je dynamische content wil beheren en tonen. Met andere woorden, je moet een hybride oplossing bedenken tussen statisch\/dynamisch<\/a> (meer hierover verder in het artikel).<\/p>\n

Opmerkingen<\/a> kunnen bijvoorbeeld extern gehost worden middels een dienst als Disqus<\/a>.<\/p>\n

Contactformulieren<\/a> moeten ook worden omgeleid via een externe partner zoals Google Forms<\/a>. Simpel gezegd verlies je dus rechtstreekse controle over dergelijke dynamische content, omdat de antwoorden niet op je servers worden opgeslagen.<\/p>\n

Frequente builds zijn onhandig<\/strong>: Statische sites kennen het probleem van frequente reconverts. Elke wijziging die je op je site doorvoert, is slechts zichtbaar nadat je de pagina’s opnieuw hebt gegenereerd en opnieuw naar de server hebt ge\u00fcpload.<\/p>\n

Vereiste technische expertise<\/strong>: Gatsby stoelt op ReactJS en GraphQL. Daarom is enige kennis van JavaScript en een globaal idee van GraphQL nodig om een website via Gatsby onderhouden.<\/p>\n

Statische websites<\/a> zijn een goede keuze als je op zoek bent naar een goedkope oplossing met een hoge mate van veiligheid. Denk hierbij aan portfoliowebsites voor freelancers en sites met productdemo’s.<\/p>\n

Ben je van mening dat de voordelen opwegen tegen de nadelen? Goed! Dan gaan we nu proberen om Gatsby in te stellen voor integratie met onze WordPress-site<\/a>.<\/p>\n

We gebruiken in deze tutorial de meest recente versie van Gatsby en is te vinden op GitHub<\/a><\/p>\n

Stap 1: Gatsby opzetten<\/h2>\n

In dit gedeelte kijken we naar hoe we Gatsby kunnen installeren en hoe we een eenvoudige statische site maken met Gatsby.<\/p>\n

Vereisten<\/h3>\n

De eerste stap om Gatsby aan de praat te krijgen is het controleren van de vereisten. Gatsby wordt bediend via npm, de package-installer van NodeJS. Om die reden is het zaak dat je binnen je omgeving beschikt over NodeJS en npm voordat je Gatsby kan installeren. Daarnaast moet je Git hebben ge\u00efnstalleerd<\/a>, het broncodebeheersysteem.<\/p>\n