Headless WordPress - REST API i nowoczesny frontend
Headless WordPress to architektura gdzie WordPress służy tylko jako backend (CMS), a frontend jest oddzielną aplikacją (React, Next.js, Vue). Komunikacja przez REST API lub GraphQL. Dla zaawansowanych projektów wymagających maksymalnej wydajności.
Krótka odpowiedź
Co to jest Headless CMS
Tradycyjny WordPress:
- PHP generuje HTML na serwerze
- Motywy definiują wygląd
- Wszystko w jednym
Headless WordPress:
- WordPress = tylko baza danych + panel admina
- Frontend = osobna aplikacja (React, Vue, Next.js)
- Komunikacja przez API
- WordPress "bez głowy" (bez widoku)
Korzyści:
- Szybkość (statyczny frontend, CDN)
- Bezpieczeństwo (ukryty WordPress)
- Elastyczność (dowolny frontend)
- Omnichannel (ta sama treść na web, app, IoT)
WordPress REST API
Domyślne endpointy:
- GET /wp-json/wp/v2/posts - lista postów
- GET /wp-json/wp/v2/posts/{id} - pojedynczy post
- GET /wp-json/wp/v2/pages - strony
- GET /wp-json/wp/v2/categories - kategorie
- GET /wp-json/wp/v2/media - media
Parametry:
- ?per_page=10 - ilość na stronę
- ?page=2 - paginacja
- ?categories=5 - filtr kategorii
- ?_embed - załącz powiązane dane
Custom endpoints:
```php
register_rest_route('myplugin/v1', '/data', [
'methods' => 'GET',
'callback' => 'my_function'
]);
```
WPGraphQL - alternatywa dla REST
Czym jest GraphQL:
- Język zapytań do API
- Pobierasz dokładnie to, czego potrzebujesz
- Jedno zapytanie zamiast wielu
WPGraphQL (wtyczka):
- Dodaje GraphQL endpoint do WordPress
- /graphql
- GraphiQL IDE do testowania
Przykład zapytania:
```graphql
query {
posts(first: 10) {
nodes {
title
slug
date
featuredImage {
node { sourceUrl }
}
}
}
}
```
Zalety vs REST:
- Mniej zapytań (wszystko w jednym)
- Brak over-fetching
- Typowanie (schema)
- Lepszy dla złożonych relacji
Frontend dla Headless WordPress
Next.js (polecane):
- React framework
- SSG (Static Site Generation) - szybkie
- SSR (Server Side Rendering) - dynamiczne
- API Routes
- Incremental Static Regeneration
Gatsby:
- Static site generator
- GraphQL natywny
- Plugin ecosystem
- Wolniejsze buildy przy dużych stronach
Nuxt.js (Vue):
- Odpowiednik Next.js dla Vue
- SSG i SSR
- Dobra dokumentacja
Astro:
- Ultra szybki
- Zero JS domyślnie
- Kompatybilny z React/Vue/Svelte