Cos'è Headless WordPress?

Headless WordPress e un architettura in cui WordPress viene usato solo come sistema di gestione contenuti (CMS) e API di contenuti, mentre il frontend pubblico e costruito con uno stack separato. Lo strato classico dei temi (PHP, gerarchia dei template, jQuery) viene rimosso o ignorato, e l applicazione frontend recupera i contenuti tramite REST API WordPress (presente dal WordPress 4.7 di dicembre 2016) o tramite l endpoint GraphQL del plugin WPGraphQL (oltre 60.000 installazioni nel 2025). Framework popolari: Next.js (React, Vercel), Astro, Nuxt (Vue), SvelteKit, Gatsby, Remix, Eleventy, Hugo. Il frontend viene distribuito separatamente, spesso come HTML statico su CDN (Vercel, Netlify, Cloudflare Pages, AWS Amplify) o come Node.js on edge.

Differenza rispetto a WordPress classico

1. Visitatore apre https://shop.example.it.
2. Frontend chiama https://cms.example.it/wp-json/wp/v2/posts.
3. WordPress restituisce JSON.
4. Frontend renderizza e invia HTML piu piccolo bundle JS.

Quali API

Vantaggi

• Performance.
• Core Web Vitals migliori.
• Dev experience moderna.
• Superficie d attacco minore.
• Multi canale.
• Scalabilita con ISR.
• Editor invariato.

Svantaggi

• Costo maggiore.
• Preview WYSIWYG rotto.
• Plugin con HTML iniettato rotti.
• SEO manuale.
• Build piu lunghi.
• Commenti e form da rifare.
• Sviluppatori React piu costosi.

Framework popolari

• Next.js, Astro, Nuxt, SvelteKit, Gatsby, Eleventy, Remix.

Hosting

• Backend: Kinsta, WP Engine, Cloudways. Piani: WP Engine Atlas, Kinsta Headless, Pantheon Decoupled.
• Frontend: Vercel, Netlify, Cloudflare Pages, AWS Amplify, Render, Railway, Fly.io.

Esempio con Next.js e WPGraphQL

async function getPosts() {
  const res = await fetch('https://cms.example.it/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query: `{ posts(first: 10) { nodes { title slug } } }` }),
    next: { revalidate: 60 },
  });
  return (await res.json()).data.posts.nodes;
}

Quando NON scegliere Headless

• Siti piccoli senza problemi di performance.
• Team senza React/Vue.
• Forte dipendenza dai page builder.
• Molti plugin che iniettano HTML.
• WooCommerce con checkout complesso.

SEO

SSR o SSG. Mappare title, meta description, canonical, Open Graph, Twitter Card, sitemap, robots.txt e JSON-LD.

Come InspectWP aiuta?

InspectWP rileva CDN tramite header x-vercel-id, x-nf-request-id, cf-ray.