In de huidige wereld van webdevelopment heeft het ontkoppelen van frontend- en backendsystemen veel aandacht, waardoor headless websites zijn ontstaan.
Traditioneel werden Content Management Systemen (CMS’en) altijd aan elkaar gekoppeld, maar dat ging gepaard met veel beperkingen, zoals beperkte flexibiliteit en schaalbaarheid. Het moderne headless CMS stelt ontwikkelaars echter in staat om de frontend, gebouwd met een willekeurig framework, los te koppelen van de backend via een headless CMS.
Wat is een headless CMS?
Een Headless CMS is een gespecialiseerd content management systeem dat uitsluitend de backend van je site beheert. In tegenstelling tot traditionele CMS’en dicteert het niet hoe de inhoud op de voorkant verschijnt. In plaats daarvan biedt het een Application Programming Interface(API) voor ontwikkelaars om inhoud op te halen en te leveren aan elk apparaat of platform.
Tegenwoordig bestaan er talloze headless CMS platforms. Het kan echter onnodig lijken om je content over te zetten van WordPress, waar je al bekend mee bent. Gelukkig is er een alternatief: WordPress zonder kop.
Headless WordPress
WordPress is in zijn traditionele vorm niet per definitie een headless CMS. WordPress is een populair en krachtig CMS dat bekend staat om zijn gebruiksgemak en flexibiliteit bij het maken en beheren van inhoud. Traditioneel combineert het echter inhoudsbeheer en de manier waarop het wordt gepresenteerd in één systeem.
Tegenwoordig hebben ontwikkelaars headless implementaties van WordPress gemaakt door gebruik te maken van de REST API. In zulke gevallen functioneert WordPress nog steeds als het CMS waar je inhoud creëert, beheert en opslaat. Maar in plaats van de voorkant of de website direct weer te geven via WordPress sjablonen en thema’s, is de presentatie van de voorkant ontkoppeld of losgekoppeld van de achterkant.
Hierdoor kunnen ontwikkelaars toepassingen bouwen met verschillende technologieën en frameworks, terwijl ze toch gebruik kunnen maken van de vertrouwde WordPress content management mogelijkheden. Het is een manier om WordPress meer headless te laten functioneren, ook al is het niet de standaardconfiguratie.
Dit artikel verkent twee benaderingen voor het ophalen van gegevens uit je headless WordPress CMS in je frontend framework, waarbij de nadruk ligt op twee primaire methoden: WPGraphQL en REST API.
REST API voor WordPress zonder headend
De REST API is een fundamentele pijler in WordPress development die het ophalen van gegevens in JSON format mogelijk maakt. Sinds WordPress 4.7 is het ingebouwd in WordPress en is er geen plugin nodig om het te laten werken.
Het biedt gegevenstoegang tot de inhoud van je site en implementeert dezelfde authenticatiebeperkingen – inhoud die openbaar is op je site is over het algemeen openbaar toegankelijk via de REST API, terwijl privé-inhoud, met wachtwoord beveiligde inhoud, interne gebruikers, aangepaste berichttypen en metagegevens alleen beschikbaar zijn met authenticatie of als je dat specifiek zo hebt ingesteld.
Om je WordPress gegevens in JSON format op te vragen, voeg je /wp-json toe aan de URL van je WordPress site:
http://yoursite.com/wp-jsonAls JSON API standaard niet is ingeschakeld wanneer je http://yoursite.com/wp-json bezoekt, kun je dit inschakelen door je Permalinks te openen onder WordPress Settings en Post name of een andere naar keuze te selecteren, behalve Plain:
Dit werkt voor lokale en openbare WordPress sites en biedt endpoints voor berichten, pagina’s, reacties, media, enz.
http://yoursite.com/wp-json/wp/v2/posts
http://yoursite.com/wp-json/wp/v2/comments
http://yoursite.com/wp-json/wp/v2/mediaEr is meer mogelijk met de REST API. Lees onze complete gids voor meer informatie.
WPGraphQL voor headless WordPress
In 2012 introduceerde Facebook GraphQL, een revolutionaire benadering voor het ophalen van gegevens via API’s. Het declaratieve karakter en het selectief ophalen van gegevens boden een solide alternatief voor traditionele REST API’s.
In 2015 zag Jason Bahl de vraag naar een oplossing die de flexibiliteit van GraphQL combineert met de inhoudelijke mogelijkheden van WordPress en bracht vervolgens WPGraphQL uit, een game-changer voor WordPress developers.
WPGraphQL is een op GraphQL gebaseerde plugin die een efficiëntere en meer op maat gemaakte aanpak biedt voor het opvragen van gegevens. Het presenteert een enkel endpoint, waardoor gegevens nauwkeurig kunnen worden opgehaald en over-fetching problemen die vaak voorkomen in REST API worden verminderd.
WPGraphQL gebruiken
Volg deze stappen om WPGraphQL te gebruiken:
- Installeer de WPGraphQL plugin: Begin met het installeren van de WPGraphQL plugin op je WordPress site. Je kunt dit doen via het WordPress dashboard of door het te downloaden uit de officiële WordPress plugin repository.
WpGraphQL plugin in WP marktplaats. - Verken de GraphQL Playground: Eenmaal geïnstalleerd, biedt WPGraphQL een ingebouwde GraphQL Playground. Om deze te openen, navigeer je naar de GraphQL tab op je WordPress dashboard:
GraphQL IDE verkennen in WordPress. Met deze playground kun je het schema verkennen, query’s uitvoeren en interactief mutaties testen.
- Stel je queries samen: Profiteer van GraphQL door custom query’s te maken voor je specifieke gegevensvereisten. Gebruik het zelfdocumenterende schema om de beschikbare gegevens en relaties te begrijpen.
Haal WordPress postgegevens op met WPGraphQL.
Je kunt WPGraphQL nu integreren in je frontend applicatie, of die nu gebouwd is met React, Vue of een ander framework, door een enkel GraphQL endpoint te gebruiken om gegevens efficiënt op te halen en je UI dynamisch bij te werken.
Belangrijkste functies van WPGraphQL
WPGraphQL heeft de belangrijkste functies voor een gestroomlijnde en gerichte ervaring met het ophalen van gegevens, zoals hieronder weergegeven.
Eén endpoint voor het nauwkeurig ophalen van gegevens
WPGraphQL biedt een eenduidig endpoint, meestal /graphql, waarmee je efficiënt specifieke gegevens kunt ophalen. Dit in tegenstelling tot de REST API, waar je meerdere endpoints nodig hebt om dezelfde informatie op te halen.
Stel dat je voor de REST API details wilt opvragen over een specifiek bericht en de bijbehorende opmerkingen. Je moet dan meerdere verzoeken doen aan verschillende endpoints, bijvoorbeeld:
Om informatie over een bericht op te halen:
http://yoursite.com/wp-json/wp/v2/posts/123Om comments over het bericht op te halen:
http://yoursite.com/wp-json/wp/v2/comments?post=123Aan de andere kant kun je met WPGraphQL hetzelfde resultaat bereiken met een enkele, gerichte query:
{
post(id: "123") {
title
content
comments {
edges {
node {
content
}
}
}
}
}In dit voorbeeld wordt de GraphQL query naar een enkel endpoint gestuurd. De query specificeert dat we informatie willen over het bericht met ID “123”, inclusief de titel, inhoud en bijbehorende opmerkingen. WPGraphQL verwerkt deze query en stuurt een antwoord terug dat precies de gegevens bevat die we hebben opgevraagd, alles in één keer.
Gerichte query’s voor efficiënt ophalen
Met GraphQL kun je specifieke custom query’s maken. Hierdoor kun je alleen de benodigde gegevens opvragen, waardoor over-fetchen tot een minimum wordt beperkt.
Stel dat je een paar details (titel, auteur en datum) wilt opvragen over alle berichten. De REST API kan dit niet. Om deze gegevens op te vragen, moet je een endpoint als hieronder gebruiken:
http://yoursite.com/wp-json/wp/v2/postsDit endpoint haalt de volledige gegevensset voor alle berichten op, inclusief inhoud, categorieën en bijbehorende gegevens. Met WPGraphQL kun je een gerichte query maken om alleen de specifieke gegevens op te halen die je nodig hebt:
{
posts {
title
date
author {
name
}
}
}In dit voorbeeld is de GraphQL query ontworpen om details over de berichten op te halen. We vragen echter alleen naar de titel, de datum en de naam van de auteur. Met WPGraphQL kun je alleen de velden opvragen waarin je geïnteresseerd bent, wat resulteert in een efficiënter en lichter antwoord.
Meerdere hoofdbronnen
In WPGraphQL kun je meerdere hoofdbronnen in een enkel verzoek opvragen, waardoor het flexibel en efficiënt is:
{
posts {
edges {
node {
title
content
}
}
}
pages {
edges {
node {
title
content
}
}
}
}De ideale head kiezen voor headless WordPress
Wanneer je begint aan de reis van een headless WordPress installatie, is een van de kritieke beslissingen die je moet nemen het kiezen van de ideale head – de frontend technologie die je gebruikersinterface zal aansturen en de gebruikerservaring zal dicteren.
Deze beslissing is enorm belangrijk omdat het een directe invloed heeft op de prestaties, schaalbaarheid en onderhoudbaarheid van je webapplicatie. Verschillende frontend frameworks en technologieën zijn compatibel met headless WordPress, elk met zijn eigen sterke punten en overwegingen.
Je kunt bijvoorbeeld een Statische Site Generator (SSG) kiezen en deze gratis deployen op Kinsta’s Statische Site Hosting, zodat je je alleen druk hoeft te maken over het hosten van WordPress (de backend) en kunt genieten van gratis hosting voor de head (frontend).
Je kunt ook een robuustere aanpak gebruiken, bijvoorbeeld door een JavaScript bibliotheek zoals React te gebruiken om je frontend aan te sturen en WordPress de backend te laten verwerken.
Samenvatting
Zowel WPGraphQL als de REST API bieden krachtige manieren om gegevens op te halen uit een headless WordPress CMS en deze naadloos te integreren in frontend applicaties. De keuze tussen de twee hangt af van de specifieke behoeften van je project en de manier waarop je gegevens wilt ophalen.
Als je kiest voor de REST API, krijg je toegang tot een ingebouwde oplossing in WordPress, waarmee je eenvoudig gegevens in JSON format kunt ophalen. Aan de andere kant biedt WPGraphQL een modernere en efficiëntere aanpak, waarbij gebruik wordt gemaakt van de kracht van GraphQL.
Omdat de headless trend zich blijft ontwikkelen, kunnen developers de tool kiezen die het beste past bij hun workflow en projectdoelen, zodat ze verzekerd zijn van een naadloze en efficiënte integratie tussen WordPress en het frontend framework van hun keuze.
Bij Kinsta is het maken en beheren van je WordPress (backend) een fluitje van een cent met onze gespecialiseerde WordPress Hosting. Het bevat waardevolle features, waaronder edge caching, site backups, gratis Cloudflare SSL certificaten, Kinsta CDN en meer.
Je kunt je frontend vervolgens deployen met onze Applicatie Hosting of Statische Site Hosting voor SSG’s. Met deze uniforme aanpak kunnen zowel je frontend als je backend gemakkelijk worden gehost en benaderd via één enkel dashboard.
Laat een reactie achter