Technieken combineren voor de beste digitale oplossing op maat

blog

React + Contentful + Gatsby

Bij E-sites zijn we continu bezig met innovatie en het verbreden van onze kennis, zodat we altijd op de hoogte zijn van de nieuwste technieken en onze klanten de beste oplossing kunnen aanbieden. 

Een recent project gaf ons de mogelijkheid om ons verder te verdiepen in een oplossing waarbij we alleen de front-end ontwikkelen en gebruik maken van een losstaand contentmanagementsysteem (CMS). Door alleen de front-end te ontwikkelen zijn er geen back-end developers nodig voor het project, waardoor de kennis minder verdeeld is. Het bouwen en debuggen gaat dan sneller en is minder foutgevoelig. Ook besparen we veel tijd, omdat er geen uitgebreid back-end CMS gebouwd hoeft te worden. Voor dit front-end project maakten we gebruik van de technieken: React + Contentful + Gatsby. Die licht ik hieronder toe.

React

We hebben React gebruikt, omdat het een JavaScript framework is waarmee developers relatief makkelijk en snel een webpagina in elkaar kunnen zetten. Met React ontwikkelen we templates en componenten die gebruikt kunnen worden op verschillende pagina’s. En dat is super handig. Voor development betekent dit namelijk dat componenten slechts op één plek aangepast hoeven te worden. React zorgt er dan automatisch voor dat de componenten vernieuwd worden op elke pagina waar ze op voorkomen. Alleen relevante data wordt dus geüpdatet en herladen, in plaats van de gehele pagina herladen. Dit zorgt ervoor dat de webpagina erg snel aanvoelt.

Contentful

Contentful is een headless CMS. Een headless CMS staat los van de website en via een API wordt de content uit het CMS opgehaald voor verschillende platformen. Mijn collega Remco geeft in het artikel ‘Een headless CMS - iets voor jou?’ een uitgebreide uitleg over Headless CMS en in het artikel ‘Welk headless CMS platform kies je?’ licht hij onder andere Contentful uitgebreid toe. 

Terug naar Contentful. Alle content van de klant wordt gevuld in dit CMS en die data wordt opgehaald door middel van de Contentful API. Het fijne aan Contentful is dat het CMS vrijheid biedt in het opbouwen van een datastructuur voor verschillende pagina’s, maar ook voor minder ingewikkelde custom functionaliteiten. Er kunnen namelijk verschillende soorten data gecombineerd worden om zo bijvoorbeeld een zelf op te bouwen slider of formulier samen te stellen, en dat was voor dit project perfect.

Daarnaast is Contentful een SaaS-oplossing. SaaS staat voor ‘Software as a Service’. De grootste voordelen hiervan zijn schaalbaarheid en onderhoud. De kosten van een SaaS-oplossing bewegen in de meeste gevallen mee met de behoeften van de gebruiker, waardoor er geen onnodige kosten ontstaan. Daarnaast is het qua onderhoud erg voordelig, omdat het CMS onderhouden wordt door het bedrijf Contentful. Dit betekent dat er kosteloos nieuwe functionaliteiten en verbeteringen worden doorgevoerd aan het CMS.

Gatsby

Als laatste hebben we Gatsby gebruikt om de website zo snel mogelijk te laten zijn. Gatsby is een Static Site Generator, wat betekent dat het statische pagina’s genereert. Bij een statische pagina hoeft geen data meer opgehaald te worden wanneer een gebruiker de pagina opent, omdat alle data simpelweg al op de pagina staat. Het genereren van de statische pagina’s kan worden aangeroepen door een developer. Gatsby kijkt dan naar de bestanden in een project en haalt waar nodig data op. Vervolgens wordt deze data samengevoegd met de templates en componenten uit React, waardoor statische webpagina’s ontstaan. Deze worden samengevoegd in een map en komen vervolgens op de server terecht, waardoor er een website te zien is. Doordat de pagina’s statisch zijn en er dus geen data meer opgehaald hoeft te worden, zijn de laadtijden extreem laag en is de website dus super snel!

Een goede combinatie samengevat

  1. 1

    React

    React maakt het mogelijk om snel templates te creëren waarop pagina’s gebaseerd worden en om verschillende componenten te hergebruiken.

  2. 2

    Contentful

    In Contentful wordt data (content) opgeslagen die vervolgens door middel van de Contentful API opgehaald kan worden op verschillende platformen.

  3. 3

    Gatsby

    Gatsby zorgt dat er een statische website wordt opgebouwd door data op te halen uit Contentful en deze in HTML bestanden op de server te zetten.

De combinatie van React, Contentful en Gatsby werkt ontzettend goed voor het opzetten van content websites met weinig custom functionaliteiten, door de functies en voordelen die iedere techniek naar de tafel brengt. React zorg voor herbruikbaarheid, Contentful voor onderhoudbaarheid en Gatsby voor snelheid. Voor grotere websites, met meer custom functionaliteiten, is het vaak beter om een oplossing toe te passen die aan de achterkant van de website meer ontwikkelingsmogelijkheden biedt. Het CMS ‘Kunstmaan’ kan dan bijvoorbeeld een goede optie zijn. Collega Sam vertelt je alle voordelen van Kunstmaan in het artikel 'De voordelen van Kunstmaan CMS'.