WordPress Headless Next.js SSG 2025

WordPress como Headless CMS con Next.js y Static Site Generation (SSG)

La arquitectura de sitios web ha evolucionado drásticamente. Ya no basta con un CMS monolítico que renderiza páginas en el servidor. Hoy, la combinación de WordPress como Headless CMS con Next.js y SSG (Static Site Generation) se ha convertido en la opción predilecta para proyectos que exigen rendimiento, escalabilidad y una experiencia de desarrollo moderna.

Este artículo es una guía técnica para SysAdmins y desarrolladores que desean implementar esta arquitectura, optimizar el SEO WordPress y aprovechar al máximo la generación estática.

¿Por qué WordPress como Headless CMS?

WordPress tradicional (acoplado) sirve el frontend y el backend desde el mismo servidor. En cambio, un headless CMS WordPress expone solo la API REST o GraphQL, permitiendo que cualquier frontend (React, Vue, Next.js) consuma el contenido.

Ventajas clave

Rendimiento extremo: El frontend se genera como HTML estático (SSG) y se sirve desde un CDN.
Seguridad: Al separar el backend, se reduce la superficie de ataque. No hay PHP ejecutándose en el frontend.
Flexibilidad total: Puedes usar cualquier tecnología moderna para el frontend, sin estar atado a la jerarquía de temas de WordPress.
Escalabilidad: El backend de WordPress puede estar en un servidor modesto, mientras el frontend estático escala a millones de visitas sin esfuerzo.

[INFO] Si tu proyecto requiere actualizaciones en tiempo real o contenido dinámico (como comentarios en vivo), considera combinar SSG con ISR (Incremental Static Regeneration) en Next.js.

Next.js: El Frontend Perfecto para Headless WordPress

Next.js es un framework de React que ofrece SSG, SSR (Server Side Rendering) y ISR. Para un headless CMS, la generación estática es la joya de la corona.

¿Cómo funciona SSG con Next.js?

En tiempo de build, Next.js obtiene todos los posts y páginas desde la API REST de WordPress.
Genera archivos HTML estáticos para cada ruta.
Estos archivos se despliegan en un CDN (Vercel, Netlify, AWS S3+CloudFront).
Cuando un usuario visita la página, recibe el HTML pre-renderizado al instante.

# Comando típico de build para SSG
next build && next export

[TIP] Para proyectos grandes, activa la exportación estática (next export) o usa output: 'export' en next.config.js si usas Next.js 13+.

Configuración Paso a Paso: WordPress + Next.js + SSG

1. Preparar WordPress como Headless CMS

Primero, necesitas exponer los datos de WordPress a través de una API. La API REST de WordPress viene activa por defecto, pero para mayor eficiencia, instala WPGraphQL (plugin gratuito) y usa GraphQL.

Plugins recomendados:

WPGraphQL: Para consultas GraphQL eficientes.
Advanced Custom Fields (ACF) + WPGraphQL: Para campos personalizados.
Yoast SEO o Rank Math: Para gestionar metadatos SEO desde WordPress.
WP Super Cache o Redis: Para cachear las respuestas de la API.

2. Crear el proyecto Next.js

npx create-next-app@latest my-headless-site
cd my-headless-site
npm install graphql @apollo/client

3. Configurar la conexión a WordPress

Crea un archivo lib/apolloClient.js:

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://tudominio.com/graphql', // Endpoint de WPGraphQL
  cache: new InMemoryCache(),
});

export default client;

4. Obtener datos con SSG

Usa getStaticProps para obtener posts en tiempo de build:

import client from '../lib/apolloClient';
import { gql } from '@apollo/client';

export async function getStaticProps() {
  const { data } = await client.query({
    query: gql`
      query GetPosts {
        posts {
          nodes {
            title
            slug
            excerpt
            featuredImage {
              node {
                sourceUrl
              }
            }
          }
        }
      }
    `,
  });

  return {
    props: {
      posts: data.posts.nodes,
    },
  };
}

5. Generar rutas dinámicas

Para posts individuales, usa getStaticPaths y getStaticProps:

export async function getStaticPaths() {
  const { data } = await client.query({
    query: gql`
      query GetAllSlugs {
        posts {
          nodes {
            slug
          }
        }
      }
    `,
  });

  const paths = data.posts.nodes.map((post) => ({
    params: { slug: post.slug },
  }));

  return { paths, fallback: 'blocking' }; // 'blocking' para ISR
}

export async function getStaticProps({ params }) {
  // Consulta por slug y devuelve props
}

SEO WordPress en un Entorno Headless

Uno de los mitos más comunes es que el SEO se pierde al usar headless. Falso. Al generar HTML estático, los motores de búsqueda reciben contenido limpio y rápido.

Estrategias para un SEO impecable

Metadatos dinámicos: Usa el plugin Yoast o Rank Math para almacenar títulos SEO, meta descripciones y OG tags en WordPress. Luego, intégralos en Next.js.

import Head from 'next/head';

export default function Post({ post }) {
  return (
    <>
      <Head>
        <title>{post.seo.title}</title>
        <meta name="description" content={post.seo.metaDesc} />
        <meta property="og:title" content={post.seo.opengraphTitle} />
      </Head>
      {/* Contenido del post */}
    </>
  );
}

Sitemaps XML: Genera sitemaps dinámicos con Next.js. Puedes usar la API de WordPress para listar todas las URLs.

Datos estructurados (Schema.org): Añade JSON-LD en cada página. Por ejemplo, para un artículo de blog:

const schemaData = {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": post.title,
  "datePublished": post.date,
  "author": {
    "@type": "Person",
    "name": post.author.node.name
  }
};

Velocidad de carga: Con SSG, las páginas se sirven desde CDN. Asegúrate de optimizar imágenes (next/image) y minificar CSS/JS.

[WARNING] No olvides configurar correctamente las redirecciones 301 y los enlaces canónicos si migras desde un WordPress tradicional. Usa el plugin Redirection o gestiona las reglas en el next.config.js.

Generación Estática vs. ISR: ¿Cuándo Usar Cada Uno?

SSG (Static Site Generation)

Ideal para: Blogs, sitios corporativos, portafolios, documentación.
Ventaja: Velocidad máxima, cero carga en el servidor.
Desventaja: El contenido se actualiza solo tras un nuevo build.

ISR (Incremental Static Regeneration)

Ideal para: Sitios con contenido que cambia con frecuencia (noticias, tiendas).
Ventaja: Revalida páginas en segundo plano sin rebuild completo.
Configuración:

export async function getStaticProps() {
  // ...
  return {
    props: { /* datos */ },
    revalidate: 60, // Revalida cada 60 segundos
  };
}

[INFO] Para sitios con alto volumen de contenido, usa fallback: 'blocking' en getStaticPaths para que las páginas nuevas se generen bajo demanda.

Despliegue y Optimización

Opciones de hosting para el frontend

Vercel: Optimizado para Next.js, despliegue automático desde Git.
Netlify: Soporte nativo para SSG con next export.
AWS S3 + CloudFront: Para control total, pero requiere configuración manual.

Configuración de CDN

Asegúrate de que el CDN sirva los archivos estáticos con cabeceras de caché agresivas:

# Ejemplo para Nginx detrás de CloudFront
location /_next/static {
  expires 365d;
  add_header Cache-Control "public, immutable";
}

Monitorización

Lighthouse: Evalúa rendimiento y SEO.
Google Search Console: Verifica que las URLs estáticas sean indexadas correctamente.
Logs de WordPress: Monitorea la carga de la API REST/GraphQL para evitar cuellos de botella.

Casos de Uso Reales

Blog de alto tráfico

Un sitio de noticias con miles de artículos. Usa SSG para los posts principales e ISR para las noticias de última hora.

Sitio corporativo multilingüe

WordPress gestiona el contenido en varios idiomas (con WPML o Polylang). Next.js genera rutas estáticas para cada idioma, mejorando el SEO internacional.

Ecommerce ligero

Aunque WooCommerce es complejo, puedes usar headless para catálogos estáticos y dejar el carrito en el lado del cliente con APIs.

Conclusión

La combinación de WordPress como Headless CMS con Next.js y SSG ofrece lo mejor de ambos mundos: la facilidad de gestión de contenido de WordPress y el rendimiento imparable de un frontend estático. Para SysAdmins, esto significa menos servidores que mantener, mayor seguridad y una escalabilidad casi infinita.

El SEO WordPress no solo se mantiene, sino que mejora gracias a páginas ultrarrápidas y metadatos bien estructurados. Si aún no has probado esta arquitectura, es el momento de hacerlo.

[TIP] Empieza con un proyecto pequeño: migra un blog personal o una landing page. Experimenta con ISR y mide el impacto en rendimiento. Luego, escala a proyectos más ambiciosos.