Como montar wordpress headless y astro

Qué es WordPress headless y por qué importa

WordPress headless significa separar dos cosas que normalmente van juntas: el panel de administración donde se escribe el contenido (el backend) y la página que ve el visitante (el frontend). En una instalación tradicional, WordPress genera el HTML en cada visita usando PHP, plugins y, casi siempre, un constructor visual como Elementor. En una arquitectura headless, WordPress sigue siendo el gestor de contenidos, pero el frontend lo construye otra herramienta, en este caso Astro, a partir de los datos que WordPress expone mediante su API REST.

La ventaja principal es la velocidad. El frontend generado con Astro no necesita PHP, no carga los scripts de Elementor ni de los plugins de página, y puede servirse como HTML estático desde un CDN. El resultado habitual es pasar de Core Web Vitals por debajo de 50 a 100/100 en Lighthouse, sin que el equipo editorial note ningún cambio en su forma de trabajar.

Paso 1: preparar WordPress

Antes de tocar Astro, hay que asegurarse de que WordPress está listo para servir contenido vía API.

• REST API activa: viene activada por defecto desde WordPress 4.7, así que en la mayoría de instalaciones no hay que hacer nada. Puedes comprobarlo visitando https://tu-wordpress.com/wp-json/wp/v2/posts y verificando que devuelve un JSON con tus entradas.
• CORS: si el frontend Astro y WordPress viven en dominios distintos (lo habitual), WordPress debe permitir peticiones desde el dominio de Astro. Esto se resuelve añadiendo las cabeceras correspondientes, normalmente desde un plugin ligero o unas líneas en functions.php.
• Contenido de prueba: ten al menos un par de entradas publicadas para poder probar el fetch durante el desarrollo.

Paso 2: crear el proyecto Astro y conectar con la API

Con WordPress listo, el siguiente paso es crear el proyecto Astro y escribir la función que obtiene los datos.

npm create astro@latest mi-proyecto
cd mi-proyecto
npm install

Astro permite definir tipos con TypeScript desde el primer momento, lo que ayuda mucho cuando se trabaja con la respuesta de la REST API de WordPress. Un ejemplo mínimo de función para obtener entradas:

// src/lib/wordpress.ts
const API_URL = 'https://tu-wordpress.com/wp-json/wp/v2';

export interface WPPost {
  id: number;
  slug: string;
  title: { rendered: string };
  content: { rendered: string };
  excerpt: { rendered: string };
}

export async function getPosts(): Promise<WPPost[]> {
  const res = await fetch(`${API_URL}/posts?_embed`);
  if (!res.ok) throw new Error('Error al obtener entradas de WordPress');
  return res.json();
}

export async function getPostBySlug(slug: string): Promise<WPPost | null> {
  const res = await fetch(`${API_URL}/posts?slug=${slug}&_embed`);
  const posts = await res.json();
  return posts[0] ?? null;
}

Paso 3: renderizar el listado y la entrada individual

Con la función anterior, una página de listado en Astro queda así:

---
// src/pages/blog/index.astro
import { getPosts } from '../../lib/wordpress';
const posts = await getPosts();
---
<ul>
  {posts.map(post => (
    <li>
      <a href={`/blog/${post.slug}/`}>
        <span set:html={post.title.rendered} />
      </a>
    </li>
  ))}
</ul>

Y la página de cada entrada individual, usando rutas dinámicas:

---
// src/pages/blog/[slug].astro
import { getPostBySlug } from '../../lib/wordpress';
const { slug } = Astro.params;
const post = await getPostBySlug(slug!);

if (!post) return Astro.redirect('/404');
---
<article>
  <h1 set:html={post.title.rendered} />
  <div set:html={post.content.rendered} />
</article>

El contenido que devuelve WordPress (content.rendered) ya viene en HTML, generado por el editor de bloques. Astro lo inserta directamente con set:html, sin necesidad de procesarlo.

Paso 4: optimizaciones básicas

Con el contenido renderizándose correctamente, hay tres cosas que conviene resolver antes de dar por terminado el proyecto:

• Imágenes: las imágenes que vienen de WordPress mantienen las URLs del CMS. Para no penalizar el rendimiento, conviene procesarlas con un paso de optimización (por ejemplo, con Sharp) y servirlas en WebP.
• Meta tags y SEO: cada entrada debería generar su propio <title> y meta description a partir de los datos de WordPress, además de las etiquetas Open Graph correspondientes.
• Sitemap: Astro puede generar un sitemap a partir de las rutas estáticas, pero si el contenido viene de WordPress, ese sitemap debe construirse dinámicamente en build time recorriendo las entradas obtenidas vía API.

Siguientes pasos

Si quieres ver esta integración ya montada en un proyecto real, el Starter Kit incluye la conexión básica a la REST API de WordPress lista para clonar. Y si lo que buscas es la lista de comprobaciones técnicas para llegar al 100/100 en Lighthouse una vez tengas el contenido renderizando, está toda en la Checklist de Core Web Vitals.