Headless WordPress: je site als API gebruiken

Headless WordPress scheidt de backend (content) van de frontend (presentatie). Je gebruikt WordPress puur als content management systeem en bouwt de website met moderne frameworks zoals React of Vue. Dit artikel legt uit wanneer en hoe je deze aanpak kiest.

Wat is Headless WordPress?

Bij traditioneel WordPress genereert PHP de HTML-pagina's. Bij headless WordPress levert WordPress alleen data via de REST API. Een aparte frontend-applicatie haalt deze data op en toont de website.

Traditioneel vs Headless

Traditioneel WordPress:

Bezoeker → WordPress → PHP genereert HTML → Pagina getoond

Headless WordPress:

Bezoeker → Frontend App → Vraagt data via API → WordPress levert JSON

Waarom Headless Kiezen?

Voordelen

Betere performance

Statische sites laden razendsnel
CDN-distributie voor alle content
Geen PHP-verwerking bij elk verzoek

Moderne development

Gebruik React, Vue, Next.js of Gatsby
Component-based architectuur
Betere developer experience

Flexibiliteit

Eén backend, meerdere frontends
Dezelfde content op website, app en displays
Onafhankelijke deployment van front- en backend

Veiligheid

WordPress admin niet publiek toegankelijk
Kleinere aanvalsvector
Betere scheiding van zorgen

Nadelen

Complexiteit

Twee systemen om te onderhouden
Meer technische kennis nodig
Preview-functionaliteit lastiger

Plugin-beperkingen

Veel plugins werken niet headless
Geen visuele page builders
Contactformulieren vereisen aparte oplossing

Kosten

Vaak twee hostingomgevingen nodig
Meer development-uren
Specialistische kennis vereist

De WordPress REST API

WordPress heeft standaard een REST API. Elk endpoint levert JSON-data:

Belangrijke Endpoints

/wp-json/wp/v2/posts      - Alle berichten
/wp-json/wp/v2/pages      - Alle pagina's
/wp-json/wp/v2/media      - Mediabestanden
/wp-json/wp/v2/users      - Gebruikers
/wp-json/wp/v2/categories - Categorieën

Voorbeeld API Response

{
  "id": 123,
  "title": {
    "rendered": "Mijn Blogpost"
  },
  "content": {
    "rendered": "<p>De inhoud van het artikel...</p>"
  },
  "date": "2024-01-15T10:30:00",
  "featured_media": 456
}

Custom Endpoints Maken

Voor specifieke data kun je eigen endpoints registreren:

[add_action](/kennisbank/wordpress-hooks-uitleg)('rest_api_init', function() {
    register_rest_route('mijnsite/v1', '/featured', [
        'methods' => 'GET',
        'callback' => 'get_featured_content',
        'permission_callback' => '__return_true'
    ]);
});

function get_featured_content() {
    $posts = get_posts([
        'meta_key' => 'featured',
        'meta_value' => '1',
        'numberposts' => 5
    ]);
    return rest_ensure_response($posts);
}

Frontend Frameworks

Next.js (Aanbevolen)

Next.js is populair voor headless WordPress door:

Server-side rendering (SSR)
Static site generation (SSG)
Incremental static regeneration
Uitstekende React-integratie

// pages/blog/[slug].js
export async function getStaticProps({ params }) {
  const res = await fetch(
    `https://jouwsite.nl/wp-json/wp/v2/posts?slug=${params.slug}`
  );
  const posts = await res.json();

  return {
    props: { post: posts[0] },
    revalidate: 60 // Hervalideer elke 60 seconden
  };
}

Gatsby

Gatsby genereert volledig statische sites:

Extreem snelle laadtijden
Uitgebreid plugin-ecosysteem
GraphQL data layer

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-wordpress',
      options: {
        url: 'https://jouwsite.nl/graphql',
      },
    },
  ],
};

Nuxt.js (Vue)

Voor Vue-developers biedt Nuxt vergelijkbare mogelijkheden als Next.js.

WPGraphQL

GraphQL is een alternatief voor REST met meer flexibiliteit:

query GetPosts {
  posts(first: 10) {
    nodes {
      id
      title
      excerpt
      featuredImage {
        node {
          sourceUrl
        }
      }
    }
  }
}

Voordelen:

Vraag exact de data die je nodig hebt
Eén request voor gerelateerde data
Sterke typing

Installeer de WPGraphQL-plugin om GraphQL te activeren.

Praktische Implementatie

Stap 1: WordPress Configureren

// Sta CORS toe voor je frontend
add_action('init', function() {
    header('Access-Control-Allow-Origin: https://jouwfrontend.nl');
    header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
    header('Access-Control-Allow-Headers: Content-Type, Authorization');
});

Stap 2: Custom Fields Exposen

ACF-velden toevoegen aan de API:

add_action('rest_api_init', function() {
    register_rest_field('post', 'acf_fields', [
        'get_callback' => function($post) {
            return get_fields($post['id']);
        }
    ]);
});

Stap 3: Authenticatie

Voor beschermde content:

// JWT Authentication plugin installeren
// Frontend stuurt token mee:
fetch('/wp-json/wp/v2/posts', {
  headers: {
    'Authorization': 'Bearer ' + jwtToken
  }
});

Hosting voor Headless

WordPress backend:

Reguliere WordPress hosting
Kan op goedkopere shared hosting
Hoeft niet supersnel te zijn

Frontend:

Vercel (ideaal voor Next.js)
Netlify (ideaal voor Gatsby)
Cloudflare Pages

De frontend kan gratis gehost worden bij veel providers.

Preview Functionaliteit

Een uitdaging bij headless is content previews. Oplossingen:

// Next.js preview mode
export async function getStaticProps({ preview, previewData }) {
  if (preview) {
    // Haal draft content op
    const res = await fetch(
      `${process.env.WORDPRESS_URL}/wp-json/wp/v2/posts/${previewData.id}?status=draft`,
      {
        headers: {
          Authorization: `Bearer ${previewData.token}`
        }
      }
    );
  }
}

Wanneer Wel/Niet Headless?

Wel Headless

Hoge performance-eisen
Developers beschikbaar met React/Vue kennis
Content moet naar meerdere kanalen
Complexe interactieve features

Niet Headless

Kleine websites of blogs
Beperkt budget
Afhankelijk van specifieke WordPress plugins
SEO met veel dynamische content
Geen technische kennis beschikbaar

Veelgestelde vragen

Is dit geschikt voor beginners? Dit onderwerp kan technisch lijken, maar met de juiste aanpak en tools is het voor iedereen toegankelijk. Begin met de basis en bouw van daaruit verder.

Wat zijn de kosten? De kosten variëren sterk afhankelijk van je behoeften en gekozen oplossingen. Gratis opties bestaan, maar betaalde alternatieven bieden vaak meer features, support en betrouwbaarheid.

Hoe lang duurt implementatie? Van een paar minuten voor eenvoudige setups tot dagen of weken voor complexe implementaties. Plan realistisch en test grondig voordat je live gaat.

Wat als ik hulp nodig heb? De meeste providers bieden support via chat, e-mail of telefoon. Online communities en documentatie zijn ook waardevolle bronnen.

Best practices

Documenteer je configuratie zodat je later weet wat je hebt ingesteld en waarom. Dit versnelt troubleshooting en overdracht.

Test voordat je live gaat in een staging-omgeving. Voorkom onverwachte problemen voor je bezoekers.

Houd alles up-to-date voor de beste beveiliging en performance. Stel herinneringen in voor regelmatig onderhoud.

Maak backups voordat je grote wijzigingen doorvoert. Een goede backup bespaart je uren werk bij problemen.

Monitor je systemen zodat je problemen vroeg ontdekt. Uptime-monitoring en loganalyse zijn essentieel.

Volgende stappen

Na het implementeren van bovenstaande is het verstandig om:

Alles te testen via verschillende apparaten en browsers
Performance te meten met tools zoals GTmetrix of PageSpeed Insights
Documentatie bij te werken met je specifieke configuratie
Team te informeren over wijzigingen en nieuwe procedures
Monitoring in te richten voor proactief onderhoud

Meer informatie: WordPress.org documentatie