Headless WordPress

Headless WordPress

# WordPress as CMS backend, custom JS frontend
# Frontend: React, Next.js, Vue, Nuxt, SvelteKit

# Fetch posts via REST API
const res   = await fetch('https://mysite.com/wp-json/wp/v2/posts?_embed');
const posts = await res.json();

# WPGraphQL plugin
query {
  posts {
    nodes {
      title slug date
      featuredImage { node { sourceUrl altText } }
    }
  }
}

# Next.js Static Generation (ISR)
export async function getStaticProps() {
  const res   = await fetch('https://mysite.com/wp-json/wp/v2/posts');
  const posts = await res.json();
  return { props: { posts }, revalidate: 60 };
}

# Benefits: fast frontend (React), familiar WP backend
# Drawback: Gutenberg editing experience degrades