Dalam beberapa tahun terakhir, istilah headless WordPress semakin populer di kalangan developer web dan mobile. Ide dasarnya terdengar sederhana: WordPress tetap menjadi backend untuk mengelola konten, pengguna, dan autentikasi, sementara frontend modern seperti React atau Flutter mengambil alih tampilan dan interaksi.
Tapi kenyataannya, menjalankan setup ini di dunia nyata seringkali lebih rumit daripada teori. Banyak developer yang mengalami frustrasi ketika mulai menghubungkan frontend dengan WordPress, terutama dalam hal autentikasi, keamanan, media, dan performa.
Apa Itu Headless WordPress?
Secara tradisional, WordPress menjalankan dua peran sekaligus:
- Backend – Mengelola konten, pengguna, plugin, dan admin panel.
- Frontend – Menyajikan konten menggunakan tema PHP dan JavaScript.
Dalam mode headless, WordPress hanya menjalankan backend. Semua tampilan diserahkan ke frontend modern yang bisa berupa:
- React / Next.js / Gatsby untuk web.
- Flutter untuk aplikasi mobile maupun web.
Keuntungan headless WordPress antara lain:
- Kontrol penuh atas UI dan UX.
- Bisa menggunakan framework modern yang lebih cepat dan interaktif.
- Memudahkan integrasi dengan aplikasi mobile.
React vs Flutter: Mana yang Lebih Cocok?
Pertanyaan klasik: “Apakah lebih baik menggunakan React atau Flutter untuk frontend headless WordPress?”
React (Web + Mobile dengan React Native)
- Kelebihan: Ekosistem matang, banyak library untuk WordPress (WPGraphQL, Apollo Client), SEO-friendly jika menggunakan Next.js/Gatsby, banyak contoh produksi stabil.
- Kekurangan: Membutuhkan pemahaman SSR untuk SEO maksimal, SPA bisa menimbulkan masalah SEO jika tidak dikelola baik.
Flutter (Mobile dan Web)
- Kelebihan: Sekali tulis, bisa dijalankan di Android, iOS, dan Web. UI konsisten dan cepat untuk mobile.
- Kekurangan: Flutter Web belum seoptimal React untuk SEO. Integrasi WordPress via REST API/GraphQL, kurang contoh produksi.
💡 Kesimpulan: Untuk web-first dan SEO-friendly, React/Next.js lebih mudah dan stabil. Flutter lebih cocok untuk aplikasi mobile.
Menghubungkan Frontend dengan WordPress
Ada dua pendekatan utama:
- REST API WordPress – API bawaan untuk mendapatkan post, user, kategori. Mudah, tapi terbatas untuk query kompleks dan memerlukan autentikasi.
- GraphQL via WPGraphQL – Plugin resmi untuk query fleksibel, mendukung nested query, filtering, pagination, sangat direkomendasikan untuk frontend modern.
Masalah yang Sering Muncul di Headless WordPress
- Autentikasi: SPA/mobile perlu token/cookie. Pilihan: JWT, OAuth 2.0, Cookie + Nonces.
- Keamanan: Perlu jaga CORS, token expiration, validasi server-side.
- Media Handling: URL gambar harus publik, konsisten dengan CDN jika digunakan.
- Caching dan Performance: SSR/pre-rendering di React membantu performa, SPA tanpa caching bisa lambat.
- Plugin Tidak Headless-Friendly: Beberapa plugin mengasumsikan tema PHP, tidak optimal untuk headless.
Strategi Headless WordPress yang Stabil
- Gunakan WPGraphQL untuk query data fleksibel.
- Gunakan JWT untuk autentikasi SPA/mobile.
- Next.js (React) untuk web-first, Flutter untuk mobile.
- Caching & pre-rendering: Next.js ISR, SWR/React Query.
- Periksa plugin & media, gunakan CDN/public URL untuk gambar.
- Keamanan & CORS: konfigurasi benar, HTTPS, validasi token di server.
Alternatif Jika Headless WordPress Terlalu Ribet
- Strapi / Directus / Supabase – CMS API-first, mudah untuk frontend modern.
- Custom Node.js backend – Kontrol penuh logika auth dan API.
- WordPress VIP / Managed Headless – Infrastruktur stabil untuk headless setup.