WordPress Headless con Next.js o Astro: El futuro del desarrollo web

Descubre cómo desacoplar WordPress para usarlo solo como backend y construir un frontend ultrarrápido con Next.js o Astro. Moderniza tu web hoy.

Introducción

WordPress impulsa más del 40% de la web. Es el rey de los gestores de contenido (CMS) por una razón: su interfaz es amigable y su ecosistema es infinito. Sin embargo, en un mundo donde la velocidad de carga y la experiencia de usuario (UX) lo son todo, la arquitectura tradicional de WordPress (monolítica) a veces se queda corta frente a las tecnologías modernas de JavaScript.

Aquí es donde entra el concepto de WordPress Headless.

Imagina tener la potencia y facilidad de edición de WordPress, pero con la velocidad de un Ferrari en la parte visual. En este artículo, exploraremos cómo utilizar WordPress solo como backend (API) y construir el frontend con herramientas de vanguardia como Next.js o Astro.

¿Qué es exactamente "WordPress Headless"?

Tradicionalmente, WordPress se encarga de todo:

1. Backend: Donde escribes el contenido y gestionas la base de datos.
2. Frontend: Donde se muestra el sitio web al usuario (usando temas PHP).

En una arquitectura Headless (sin cabeza), cortamos ese vínculo. WordPress se queda solo para que los editores escriban contenido. El "tema" de PHP desaparece y, en su lugar, una aplicación externa (construida con JavaScript) solicita los datos y los muestra.

¿Por qué deberías considerarlo?

Pasar a una arquitectura desacoplada no es solo una moda, tiene beneficios tangibles:

• Rendimiento Extremo: Al usar generadores de sitios estáticos (SSG) o renderizado del lado del servidor (SSR), tu web carga casi instantáneamente.
• Seguridad Mejorada: Como el frontend está separado del backend, es mucho más difícil para los atacantes encontrar vulnerabilidades en tu base de datos de WordPress.
• Libertad de Desarrollo: Los desarrolladores pueden usar React, Vue o Svelte sin estar atados a las limitaciones de los temas de WordPress.
• Omnicanalidad: Puedes usar el mismo contenido de WordPress para alimentar tu web, una app móvil y una newsletter simultáneamente.

Los Contendientes del Frontend: Next.js vs. Astro

Una vez tienes tu WordPress listo, necesitas elegir con qué construir la cara visible. Los dos grandes favoritos hoy en día son:

1. Next.js (El Estándar de la Industria)

Next.js es un framework de React. Es robusto, potente y cuenta con el respaldo de Vercel.

• Ideal para: Sitios web complejos, tiendas online (WooCommerce Headless), o aplicaciones que requieren mucha interactividad y gestión de estado.
• Ventaja: Su componente <Image> optimiza las imágenes de WordPress automáticamente y tiene una comunidad inmensa.

2. Astro (El Nuevo Retador)

Astro ha ganado popularidad por su enfoque de "Cero JavaScript por defecto".

• Ideal para: Blogs, sitios de noticias, portafolios y webs corporativas donde el contenido es lo principal.
• Ventaja: Envía mucho menos código al navegador que Next.js, lo que suele resultar en puntuaciones de 100/100 en Google Lighthouse casi sin esfuerzo.

¿Cómo conectamos WordPress con el Frontend?

Para que tu frontend (Next.js o Astro) "hable" con WordPress, necesitamos una API. Tienes dos opciones principales:

A. WP REST API

Viene instalada por defecto en WordPress. Es fácil de usar y funciona con endpoints estándar (ej. tusitio.com/wp-json/wp/v2/posts). Es genial para empezar, pero a veces trae más datos de los que necesitas, lo que puede ralentizar la conexión.

B. WPGraphQL (La opción recomendada)

GraphQL es un lenguaje de consulta que te permite pedir exactamente lo que necesitas y nada más.
Para usarlo, solo instalas el plugin gratuito WPGraphQL en tu WordPress.

• Ejemplo: Puedes pedir solo el "título" y la "imagen destacada" de los últimos 3 posts, ahorrando ancho de banda y tiempo de carga.

Pasos básicos para empezar

Si quieres probar esta arquitectura, aquí tienes la hoja de ruta simplificada:

1. Prepara tu WordPress:

   • Instala un WordPress limpio (puede ser en un subdominio o local).
   • Instala el plugin WPGraphQL.
   • (Opcional) Instala "Headless Mode" para desactivar el frontend clásico de WP.

2. Inicia tu proyecto Frontend:

   • Para Next.js: npx create-next-app@latest mi-web-wp
   • Para Astro: npm create astro@latest

3. Conecta los datos:

   • Usa fetch o clientes como Apollo Client para hacer consultas a tu endpoint de GraphQL y traer tus posts.

4. Despliega:

   • El backend (WordPress) puede estar en cualquier hosting compartido barato o gestionado.
   • El frontend (Next/Astro) se despliega gratis y fácil en plataformas como Vercel o Netlify.

Conclusión

WordPress Headless no es para todos los proyectos (si necesitas usar constructores visuales como Elementor o Divi, esto no es para ti). Pero si buscas velocidad, seguridad y una experiencia de desarrollo moderna, combinar la potencia de gestión de contenidos de WordPress con la tecnología de Next.js o Astro es la mejor decisión que puedes tomar este año.

¿Estás listo para dar el salto al desarrollo moderno?

Manos a la obra: Cómo extraer tus posts (Ejemplo Práctico)

La teoría suena bien, pero ¿cómo se ve esto en el código? Vamos a ver cómo pedirle a WordPress los últimos artículos de tu blog.

Para estos ejemplos usaremos GraphQL, ya que es mucho más limpio que la API REST. Imagina que quieres obtener: Título, Slug (URL) y Extracto.

1. La Consulta (The Query)

Independientemente de si usas Astro o Next.js, la "pregunta" que le haces a WordPress es la misma:

query ObtenerPosts {
  posts(first: 6) {
    nodes {
      title
      slug
      excerpt
      date
    }
  }
}

2. Ejemplo en Astro (Sencillez máxima)

En Astro, puedes hacer la llamada directamente en el "frontmatter" (la parte superior del archivo) usando fetch. Así de fácil se crea una página de blog:

---
// src/pages/blog.astro

const res = await fetch("https://tu-wordpress.com/graphql", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    query: `
      query ObtenerPosts {
        posts(first: 10) {
          nodes {
            title
            slug
            excerpt
          }
        }
      }
    `,
  }),
});

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

<section>
  <h1>Últimas Novedades</h1>
  <div class="grid-posts">
    {articulos.map((post) => (
      <article>
        <h2>{post.title}</h2>
        <div set:html={post.excerpt} />
        <a href={`/blog/${post.slug}`}>Leer más</a>
      </article>
    ))}
  </div>
</section>

3. Ejemplo en Next.js (App Router)

En las versiones modernas de Next.js, puedes hacer esto directamente en tu componente como una función asíncrona.

// app/blog/page.js

async function getPosts() {
  const res = await fetch('https://tu-wordpress.com/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      query: `
        query ObtenerPosts {
          posts {
            nodes {
              title
              slug
            }
          }
        }
      `,
    }),
    next: { revalidate: 60 }, // ISR: Se actualiza cada 60 segundos
  });

  const json = await res.json();
  return json.data.posts.nodes;
}

export default async function BlogPage() {
  const posts = await getPosts();

  return (
    <main>
      <h1>Blog</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <a href={`/blog/${post.slug}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </main>
  );
}

¿Qué pasa con los Custom Post Types (CPT)?

Muchos usamos WordPress no solo para blogs, sino para catálogos, portafolios o inmobiliarias usando Custom Post Types (ej. "Libros", "Casas", "Proyectos").

La magia de WPGraphQL es que detecta tus CPTs automáticamente.

1. Asegúrate de que en el plugin donde creaste el CPT (como CPT UI o Advanced Custom Fields), la opción "Show in GraphQL" esté activada.
2. En tu código, solo cambia la palabra posts por el nombre de tu CPT (en formato camelCase).

Ejemplo: Si tienes un CPT llamado "Proyectos":

query ObtenerProyectos {
  projects {  <-- ¡Solo cambiamos esto!
    nodes {
      title
      featuredImage {
        node {
          sourceUrl
        }
      }
    }
  }
}

¡Así de flexible es! No necesitas programar endpoints nuevos en PHP; WordPress expone tus datos y tu Frontend simplemente los consume.