Integración con Strapi v5 CMS, Webhooks y Sincronización Automática Sin Terminal

1. ¿Por qué las rutas de Next.js 16 usan Force-Cache?

En Next.js 16 App Router, todas las solicitudes fetch se almacenan en caché agresivamente por defecto (Force-Cache) para lograr aperturas en milisegundos. Cuando se actualiza contenido en Strapi o Medusa, se utiliza la arquitectura de Revalidación de Caché On-Demand para invalidar y purgar la caché al instante.

2. Guía Paso a Paso para Configurar Webhooks en Strapi CMS

Para que guardar o publicar una página en Strapi purgue de inmediato la caché del frontend sin reiniciar el servidor:

1. Inicia sesión en Strapi y ve a Settings > Webhooks.
2. Haz clic en el botón Create new Webhook.
3. Name: Asigna un nombre claro como Next.js Revalidation Webhook.
4. URL: Introduce http://storefront:3000/api/revalidate (red interna de Docker) o https://tudominio.com/api/revalidate.
5. Events: Marca los eventos de Entry (create, update, delete, publish y unpublish).

• Validación de Autenticidad: Comprobación de la clave secreta desde el encabezado x-strapi-secret o el parámetro de consulta.
• Purga Selectiva de Caché: Limpieza de las etiquetas de caché correspondientes al modelo de Strapi (ej. strapi-homepage).

import crypto from "node:crypto"
import { revalidateTag } from "next/cache"
import { NextRequest, NextResponse } from "next/server"
 
function isValidSecret(providedSecret: string | null): boolean {
  if (!providedSecret || !process.env.REVALIDATE_SECRET) return false
  const actual = new Uint8Array(crypto.createHash("sha256").update(providedSecret).digest())
  const expected = new Uint8Array(crypto.createHash("sha256").update(process.env.REVALIDATE_SECRET).digest())
  return crypto.timingSafeEqual(actual, expected)
}
 
export async function POST(request: NextRequest) {
  const secret = request.headers.get("x-strapi-secret") || request.nextUrl.searchParams.get("secret")
 
  if (!isValidSecret(secret)) {
    return NextResponse.json({ message: "Invalid secret" }, { status: 401 })
  }
 
  const body = await request.json()
  
  if (body.model) {
    revalidateTag(`strapi-${body.model}`)
  }
 
  return NextResponse.json({ revalidated: true, now: Date.now() })
}

3. Estructura de Datos y Mapeo de Dynamic Zones

La matriz de bloques de Strapi se asigna con seguridad de tipos a componentes React según el tipo __component y la variante style.

4. Optimización de Imágenes y Almacenamiento en MinIO S3

Todas las imágenes subidas en Strapi se almacenan en un contenedor MinIO S3 local, se convierten automáticamente a formato WebP y se sirven a gran velocidad a través de Caddy.

# Trigger component style sync via Strapi Admin API:
POST /api/storefront/sync-component
{
  "componentName": "home/components/ProductShowcase",
  "style": "style-2",
  "action": "add",
  "autoDeploy": false
}
 
# Trigger batch production build to GitHub Actions:
POST /api/storefront/build

Esta arquitectura aísla por completo los archivos subidos del sistema de archivos del servidor, garantizando máxima seguridad y rendimiento.