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

Source: Dev.to

Introducción

WordPress impulsa más del 40 % de la web y es el CMS más usado por su interfaz amigable y su ecosistema amplio. Sin embargo, la velocidad de carga y la experiencia de usuario son cada vez más críticas. La arquitectura tradicional (monolítica) de WordPress puede quedarse corta frente a tecnologías modernas de JavaScript.

WordPress Headless consiste en usar WordPress únicamente como backend (API) para la gestión de contenido, mientras el frontend se construye con herramientas como Next.js o Astro.

Beneficios de una arquitectura Headless

• Rendimiento extremo: Generadores de sitios estáticos (SSG) o renderizado del lado del servidor (SSR) hacen que la web cargue casi instantáneamente.
• Seguridad mejorada: Al separar el frontend del backend, se reducen los vectores de ataque sobre la base de datos de WordPress.
• Libertad de desarrollo: Puedes trabajar con React, Vue, Svelte, etc., sin las limitaciones de los temas PHP.
• Omnicanalidad: El mismo contenido alimenta web, apps móviles, newsletters y más.

Elegir el frontend: Next.js o Astro

Next.js

• Framework de React respaldado por Vercel.
• Ideal para sitios complejos, tiendas online (WooCommerce Headless) y aplicaciones con alta interactividad.
• Ventaja: el componente optimiza automáticamente las imágenes de WordPress.

Astro

• Enfoque “cero JavaScript por defecto”.
• Ideal para blogs, sitios de noticias, portafolios y webs corporativas centradas en contenido.
• Ventaja: envía mucho menos código al navegador, logrando puntuaciones cercanas a 100 / 100 en Google Lighthouse sin esfuerzo.

API: REST vs GraphQL

Ruta de implementación

1. Prepara WordPress

   • Instala una instancia limpia (subdominio o local).
   • Añade el plugin WPGraphQL.
   • (Opcional) Instala “Headless Mode” para desactivar el frontend clásico.

2. Inicia el proyecto frontend

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

3. Conecta los datos

   • Usa fetch o clientes como Apollo Client para consultar el endpoint GraphQL.

4. Despliegue

   • WordPress puede alojarse en cualquier hosting compartido o gestionado.
   • El frontend se despliega gratuitamente en plataformas como Vercel o Netlify.

Nota: Si dependes de constructores visuales como Elementor o Divi, la arquitectura headless no es la más adecuada.

Ejemplo de consulta GraphQL

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

Astro

---
// 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;
---

## Últimas Novedades

{articulos.map((post) => (
  <>
    <h2>{post.title}</h2>
    <a href={`/blog/${post.slug}`}>Leer más</a>
  </>
))}

Next.js (versión 13+ con App Router)

// app/blog/page.tsx
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 s
  });

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

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

  return (
    <>
      <h2>Blog</h2>
      {posts.map((post) => (
        <div key={post.slug}>
          <h3>{post.title}</h3>
        </div>
      ))}
    </>
  );
}

Trabajando con Custom Post Types (CPT)

WPGraphQL detecta automáticamente los CPT registrados. Asegúrate de que la opción “Show in GraphQL” esté activada en el plugin que utilizas (CPT UI, ACF, etc.).

Ejemplo para un CPT llamado “Proyectos”:

query ObtenerProyectos {
  projects {
    nodes {
      title
      featuredImage {
        node {
          sourceUrl
        }
      }
    }
  }
}

Solo cambia posts por el nombre del CPT en camelCase y podrás consumir cualquier tipo de contenido sin crear nuevos endpoints PHP.