Wat is een headless CMS?<\/h2>\n
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<\/a>) voor ontwikkelaars<\/a> om inhoud op te halen en te leveren aan elk apparaat of platform.<\/p>\n 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.<\/p>\n WordPress<\/a> 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 \u00e9\u00e9n systeem.<\/p>\n 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\u00ebert, beheert en opslaat. Maar in plaats van de voorkant of de website direct weer te geven via WordPress sjablonen<\/a> en thema’s, is de presentatie van de voorkant ontkoppeld of losgekoppeld van de achterkant.<\/p>\n Hierdoor kunnen ontwikkelaars toepassingen bouwen met verschillende technologie\u00ebn 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.<\/p>\n 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.<\/p>\n De REST API is een fundamentele pijler in WordPress development die het ophalen van gegevens in JSON format mogelijk maakt. Sinds WordPress 4.7<\/a> is het ingebouwd in WordPress en is er geen plugin nodig om het te laten werken.<\/p>\n 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\u00e9-inhoud, met wachtwoord beveiligde inhoud, interne gebruikers, aangepaste berichttypen en metagegevens alleen beschikbaar zijn met authenticatie of als je dat specifiek zo hebt ingesteld.<\/p>\n Om je WordPress gegevens in JSON format op te vragen, voeg je Als JSON API standaard niet is ingeschakeld wanneer je Dit werkt voor lokale en openbare WordPress sites en biedt endpoints<\/a> voor berichten<\/a>, pagina’s<\/a>, reacties<\/a>, media<\/a>, enz.<\/p>\n Er is meer mogelijk met de REST API. Lees onze complete gids<\/a> voor meer informatie.<\/p>\n 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.<\/p>\n In 2015 zag Jason Bahl<\/a> de vraag naar een oplossing die de flexibiliteit van GraphQL combineert met de inhoudelijke mogelijkheden van WordPress en bracht vervolgens WPGraphQL<\/a> uit, een game-changer voor WordPress developers.<\/p>\n WPGraphQL is een op GraphQL gebaseerde plugin die een effici\u00ebntere 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.<\/p>\n Volg deze stappen om WPGraphQL te gebruiken:<\/p>\n Met deze playground kun je het schema verkennen, query’s uitvoeren en interactief mutaties testen.<\/li>\n Je kunt WPGraphQL nu integreren in je frontend applicatie, of die nu gebouwd is met React<\/a>, Vue<\/a> of een ander framework, door een enkel GraphQL endpoint te gebruiken om gegevens effici\u00ebnt op te halen en je UI dynamisch bij te werken.<\/p>\n WPGraphQL heeft de belangrijkste functies voor een gestroomlijnde en gerichte ervaring met het ophalen van gegevens, zoals hieronder weergegeven.<\/p>\n WPGraphQL biedt een eenduidig endpoint, meestal 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:<\/p>\n Om informatie over een bericht op te halen:<\/p>\n Om comments over het bericht op te halen:<\/p>\n Aan de andere kant kun je met WPGraphQL hetzelfde resultaat bereiken met een enkele, gerichte query:<\/p>\n 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 \u00e9\u00e9n keer.<\/p>\n 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.<\/p>\n 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:<\/p>\n Dit endpoint haalt de volledige gegevensset voor alle berichten op, inclusief inhoud, categorie\u00ebn en bijbehorende gegevens. Met WPGraphQL kun je een gerichte query maken om alleen de specifieke gegevens op te halen die je nodig hebt:<\/p>\n 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\u00efnteresseerd bent, wat resulteert in een effici\u00ebnter en lichter antwoord.<\/p>\n In WPGraphQL kun je meerdere hoofdbronnen in een enkel verzoek opvragen, waardoor het flexibel en effici\u00ebnt is:<\/p>\n 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.<\/p>\n 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\u00ebn zijn compatibel met headless WordPress, elk met zijn eigen sterke punten en overwegingen.<\/p>\n Je kunt bijvoorbeeld een Statische Site Generator (SSG) kiezen<\/a> en deze gratis deployen op Kinsta’s Statische Site Hosting<\/a>, zodat je je alleen druk hoeft te maken over het hosten van WordPress<\/a> (de backend) en kunt genieten van gratis hosting voor de head (frontend).<\/p>\n Je kunt ook een robuustere aanpak gebruiken, bijvoorbeeld door een JavaScript bibliotheek<\/a> zoals React<\/a> te gebruiken om je frontend aan te sturen en WordPress de backend te laten verwerken.<\/p>\n 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.<\/p>\n 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\u00ebntere aanpak, waarbij gebruik wordt gemaakt van de kracht van GraphQL.<\/p>\n 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\u00ebnte integratie tussen WordPress en het frontend framework van hun keuze.<\/p>\n Bij Kinsta<\/a> is het maken en beheren van je WordPress (backend) een fluitje van een cent met onze gespecialiseerde WordPress Hosting<\/a>. Het bevat waardevolle features, waaronder edge caching<\/a>, site backups<\/a>, gratis Cloudflare SSL certificaten<\/a>, Kinsta CDN<\/a> en meer.<\/p>\n Je kunt je frontend vervolgens deployen met onze Applicatie Hosting<\/a> of Statische Site Hosting<\/a> voor SSG’s. Met deze uniforme aanpak kunnen zowel je frontend als je backend gemakkelijk worden gehost en benaderd via \u00e9\u00e9n enkel dashboard<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" 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) …<\/p>\n","protected":false},"author":287,"featured_media":57338,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[911,842],"class_list":["post-57337","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-headless-cms"],"yoast_head":"\nHeadless WordPress<\/h3>\n
![\"Architectuur](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/headless-cms-arcitecture.png\")
REST API voor WordPress zonder headend<\/h2>\n
\/wp-json<\/code> toe aan de URL van je WordPress site:<\/p>\nhttp:\/\/yoursite.com\/wp-json<\/code><\/pre>\nhttp:\/\/yoursite.com\/wp-json<\/code> bezoekt, kun je dit inschakelen door je Permalinks<\/strong> te openen onder WordPress Settings <\/strong>en Post name <\/b>of een andere naar keuze te selecteren, behalve Plain<\/strong>:<\/p>\n![\"Headless](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/configure-headless-wp-rest-api.jpg\")
http:\/\/yoursite.com\/wp-json\/wp\/v2\/posts\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/comments\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/media<\/code><\/pre>\nWPGraphQL voor headless WordPress<\/h2>\n
WPGraphQL gebruiken<\/h3>\n
\n
![\"WpGraphQL](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/wpgraphql-plugin.png\")
![\"GraphQL](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/graphql-ide-wp.jpg\")
![\"Haal](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/testing-graphql-wp.jpg\")
Belangrijkste functies van WPGraphQL<\/h3>\n
E\u00e9n endpoint voor het nauwkeurig ophalen van gegevens<\/h4>\n
\/graphql<\/code>, waarmee je effici\u00ebnt specifieke gegevens kunt ophalen. Dit in tegenstelling tot de REST API, waar je meerdere endpoints nodig hebt om dezelfde informatie op te halen.<\/p>\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/posts\/123<\/code><\/pre>\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/comments?post=123<\/code><\/pre>\n{\n post(id: \"123\") {\n title\n content\n comments {\n edges {\n node {\n content\n }\n }\n }\n }\n}<\/code><\/pre>\nGerichte query’s voor effici\u00ebnt ophalen<\/h4>\n
http:\/\/yoursite.com\/wp-json\/wp\/v2\/posts<\/code><\/pre>\n{\n posts {\n title\n date\n author {\n name\n }\n }\n}<\/code><\/pre>\nMeerdere hoofdbronnen<\/h4>\n
{\n posts {\n edges {\n node {\n title\n content\n }\n }\n }\n\n pages {\n edges {\n node {\n title\n content\n }\n }\n }\n}<\/code><\/pre>\nDe ideale head kiezen voor headless WordPress<\/h2>\n
Samenvatting<\/h2>\n