Headless WordPress + Astro: El combo definitivo para sitios ultra-rápidos

Source: Dev.to

Introducción

Todos hemos estado ahí: el cliente quiere la facilidad de edición de WordPress, pero como desarrollador buscas la experiencia de desarrollo (DX) y el rendimiento de un framework moderno como Astro.
La solución es Headless WordPress: desacoplar el frontend y usar Astro para renderizar el contenido, obteniendo un sitio estático ultra‑rápido con una puntuación perfecta en Lighthouse y manteniendo el panel de administración familiar para el cliente.

¿Por qué esta combinación?

• WordPress (Backend): el CMS más usado del mundo, con gestión de usuarios, medios y contenidos robusta.
• Astro (Frontend): framework basado en Islands Architecture que, por defecto, envía 0 KB de JavaScript al cliente. Es absurdamente rápido.

Paso 1: Configurando el Backend (WordPress)

1. Instala LocalWP y crea un sitio nuevo.
2. En Plugins > Añadir nuevo, instala y activa:
   • WPGraphQL (esencial): expone una API GraphQL limpia y rápida.
   • WPGraphQL CORS (recomendado): evita bloqueos de CORS cuando el frontend solicite datos.

Una vez activado, verás la pestaña GraphQL en la barra lateral. El endpoint típico es:

http://tusitio.local/graphql

Paso 2: Inicializando Astro

npm create astro@latest mi-blog-headless
cd mi-blog-headless
npm install

Selecciona la plantilla Empty para trabajar con una base mínima.

Paso 3: Obteniendo los Posts (Home)

Edita src/pages/index.astro y reemplaza su contenido con lo siguiente:

---
const query = `
  query GetPosts {
    posts {
      nodes {
        databaseId
        title
        slug
        excerpt
      }
    }
  }
`;

const response = await fetch("http://tusitio.local/graphql", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ query }),
});

const json = await response.json();
const posts = json.data.posts.nodes;
---

<main>
  <h1>Mi Blog Headless</h1>

  <section>
    <h2>Últimas Entradas 🚀</h2>

    {posts.map((post) => (
      <article>
        <h3>{post.title}</h3>
        <p innerHTML={post.excerpt}></p>
        <a href={`/post/${post.slug}`}>Leer más &rarr;</a>
      </article>
    ))}
  </section>
</main>

Nota: Cambia http://tusitio.local/graphql por la URL real de tu instalación de LocalWP.

Paso 4: Rutas Dinámicas (Detalle del post)

Crea el archivo src/pages/post/[slug].astro:

---
// src/pages/post/[slug].astro

export async function getStaticPaths() {
  const response = await fetch("http://tusitio.local/graphql", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      query: `
        query GetSlugs {
          posts {
            nodes {
              slug
            }
          }
        }
      `,
    }),
  });

  const json = await response.json();
  const posts = json.data.posts.nodes;

  return posts.map((post) => ({
    params: { slug: post.slug },
  }));
}

// Obtener el slug actual
const { slug } = Astro.params;

const response = await fetch("http://tusitio.local/graphql", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    query: `
      query GetPostBySlug($slug: ID!) {
        post(id: $slug, idType: SLUG) {
          title
          content
          date
        }
      }
    `,
    variables: { slug },
  }),
});

const json = await response.json();
const post = json.data.post;
---

<article>
  <h1>{post.title}</h1>

  <nav>
    <a href="/">← Volver al inicio</a>
  </nav>

  <p>Publicado el: {new Date(post.date).toLocaleDateString()}</p>

  <section innerHTML={post.content}></section>
</article>

Resultado

• Ejecuta npm run dev para ver la lista de posts y navegar al detalle de forma instantánea.
• Cuando estés listo para producción, corre npm run build. Astro generará archivos .html estáticos en la carpeta dist/, que puedes desplegar en Vercel, Netlify o cualquier hosting estático.

Ventajas de esta arquitectura

• Seguridad: WordPress puede estar oculto, protegido por contraseña o en una red privada. Solo el proceso de build necesita acceso.
• Velocidad: Se sirve HTML puro; no hay consultas a base de datos en tiempo de visita.
• Escalabilidad: Un sitio estático soporta millones de visitas sin caídas.

¿Qué sigue?

• Usa ACF para añadir campos personalizados a tu API.
• Instala @astrojs/image para optimizar imágenes provenientes de WordPress.
• Configura webhooks en WordPress para que Vercel (u otro) reconstruya el sitio automáticamente al publicar un nuevo post.

Pregunta frecuente: ¿Necesito hosting de pago para WordPress en modo Headless?

Respuesta corta: No, no necesitas un hosting caro.

1. Tráfico desacoplado

• En un WordPress monolítico, cada visita ejecuta PHP y consulta la base de datos.
• En una arquitectura Headless, el sitio estático (Astro) sirve todo el tráfico desde una CDN; WordPress recibe cero visitas públicas. Solo se usa cuando editas o cuando se genera el build.

2. Hosting económico para WordPress

• Puedes alojar WordPress en el plan más barato disponible (incluso en un contenedor Docker local o en un VPS de bajo costo).
• Dado que no recibe tráfico, no necesitas recursos avanzados como Nginx optimizado, Redis o gran cantidad de RAM.

3. Costos

En resumen, al desacoplar el frontend, reduces significativamente los costos de infraestructura sin sacrificar rendimiento ni seguridad.