Apa Itu Headless WordPress?

• Performa Tinggi: Frontend statis atau SPA (Single Page Application) memuat lebih cepat.
• Fleksibilitas: Anda bebas memilih teknologi frontend tanpa batasan tema WordPress.
• Skalabilitas: Cocok untuk aplikasi multi-platform (web, mobile, dll.).
• Keamanan: Backend WordPress bisa disembunyikan dari publik, mengurangi risiko serangan.

• Kompleksitas: Membutuhkan keahlian tambahan di luar WordPress.
• Biaya: Pengembangan dan hosting bisa lebih mahal.

• Domain dan Hosting: Gunakan hosting yang mendukung WordPress (misalnya, SiteGround atau WP Engine).
• Instal WordPress: Pasang WordPress seperti biasa melalui dashboard hosting.
• Tambahkan Konten: Buat postingan, halaman, atau custom post type (CPT) yang akan diakses melalui API.

• Kunjungi URL: yoursite.com/wp-json/wp/v2/posts.
• Jika berhasil, Anda akan melihat daftar postingan dalam format JSON.

• Periksa file .htaccess atau pengaturan keamanan hosting Anda.
• Pastikan permalink diatur ke struktur selain “Plain” (Settings > Permalinks).

• WP REST API Controller: Memungkinkan Anda mengatur endpoint khusus untuk CPT atau taksonomi.
• ACF to REST API: Menambahkan field kustom dari Advanced Custom Fields ke API.
• WPGraphQL: Alternatif REST API dengan query GraphQL yang lebih fleksibel.

• Pergi ke Plugins > Add New, cari “WPGraphQL”, instal, dan aktifkan.
• Uji endpoint di yoursite.com/graphql menggunakan alat seperti GraphiQL.

• React: Cocok untuk SPA atau aplikasi interaktif.
• Next.js: Ideal untuk situs statis atau server-side rendering (SSR).
• Vue.js: Ringan dan mudah diintegrasikan.

1. Inisialisasi Proyek:
   bash

   npx create-next-app my-headless-site
   cd my-headless-site
   npm install

2. Ambil Data dari API WordPress: Edit file pages/index.js:
   javascript

   import { useEffect, useState } from 'react';
   
   export default function Home() {
       const [posts, setPosts] = useState([]);
   
       useEffect(() => {
           fetch('https://yoursite.com/wp-json/wp/v2/posts')
               .then((res) => res.json())
               .then((data) => setPosts(data));
       }, []);
   
       return (
           <div>
               <h1>Headless WordPress Site</h1>
               <ul>
                   {posts.map((post) => (
                       <li key={post.id}>
                           <h2>{post.title.rendered}</h2>
                           <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
                       </li>
                   ))}
               </ul>
           </div>
       );
   }

3. Jalankan Frontend:
   bash

   npm run dev

   Buka localhost:3000 untuk melihat hasilnya.

• Backend (WordPress): Host di server WordPress tradisional (misalnya, Bluehost atau Kinsta).
• Frontend: Deploy ke platform seperti Vercel (gratis untuk Next.js), Netlify, atau AWS.
  • Contoh dengan Vercel:
    bash

    vercel

    Ikuti petunjuk untuk deploy frontend Anda.

• Sembunyikan Frontend WordPress: Nonaktifkan tema default dengan menambahkan kode ke functions.php:
  php

  add_action('template_redirect', function() {
      if (!is_user_logged_in() && !defined('REST_REQUEST')) {
          wp_redirect('https://your-frontend-site.com');
          exit;
      }
  });

• Batasi Akses API: Gunakan plugin seperti Wordfence atau atur autentikasi API untuk endpoint sensitif.
• Gunakan SSL: Pastikan situs WordPress Anda menggunakan HTTPS.

• Static Site Generation (SSG): Dengan Next.js, gunakan getStaticProps untuk membangun situs statis dari data WordPress.
• Preview Mode: Tambahkan fitur pratinjau konten dengan menghubungkan draft WordPress ke frontend.
• SEO: Integrasikan data meta dari plugin seperti Yoast SEO melalui API.

export async function getStaticProps() {
    const res = await fetch('https://yoursite.com/wp-json/wp/v2/posts');
    const posts = await res.json();

    return {
        props: { posts },
        revalidate: 10, // Regenerasi setiap 10 detik
    };
}

• Anda membutuhkan situs cepat dengan frontend modern (React, Vue, dll.).
• Anda ingin mendistribusikan konten ke berbagai platform (web, aplikasi mobile, IoT).
• Anda memiliki tim pengembang yang nyaman dengan JavaScript dan API.

• Pelajari API WordPress: Pahami endpoint seperti /posts, /pages, atau /categories.
• Gunakan CDN: Tingkatkan kecepatan frontend dengan layanan seperti Cloudflare.
• Pantau Performa: Uji kecepatan situs dengan alat seperti Lighthouse.