HeadstartWP es una solución moderna para desarrollar proyectos headless con WordPress, tal y como se indica en su página de inicio «A modern headless WordPress solution«.
Desarrollado por 10up, una de las agencias líderes en el sector digital, y mi lugar de trabajo. Pero no por mi trabajo escribo sobre este framework, lo utilizamos en varios proyectos y puedo confirmar que es una excelente opción para empezar un proyecto headless.
Si es la primera vez que escuchas el término «headless WordPress» te recomiendo visitar Headless WordPress: ¿Qué es, cómo funciona y cuándo deberías considerarlo? antes de seguir.
Índice de Contenidos
¿Qué es y por qué HeadstartWP?
Es un framework desarrollado con el objetivo de hacernos la vida más fácil a la hora de desarrollar un proyecto con Next.js (el framework más popular para trabajar con React) y WordPress (el CMS más popular del mercado), ya que integra por defecto:
- Data fetching a través de la REST API, tanto en el lado servidor como en el lado cliente.
- Soporte para WP multisite
- Soporte para custom post types (tipos de entradas personalizadas) y taxonomías
- WP menús con su propio componente React para el menú.
- WP previews funcionan sin ninguna configuración adicional.
- Redirecciones.
- Integración con Gutenberg, con hooks personalizados para acceder a los atributos de un bloque además de la integración de theme.json
- Integración con el plugin Yoast SEO
- Integración con el plugin Polylang para sitios web multilingües.
- Y muchas más cosas que están por venir, es un proyecto que sigue evolucionando con mucho entusiasmo.
Por el momento, el framework solo admite la solicitud de datos a través de la REST API de WordPress. No obstante, no se descarta la posibilidad de añadir soporte para GraphQL en el futuro. Esta decisión se basa en la simplicidad, considerando la complejidad adicional que implica el uso de GraphQL y WPGraphQL, lo que se traduce en proyectos más costosos.
Puedes leer acerca de la filosofía y el porqué de ciertas decisiones en su documentación.
Estructura de HeadstartWP
Echando un vistazo al repositorio en Github, podrás ver un monorepo que consta de diferentes directorios. Por un lado tenemos el headstartwp plugin para WordPress que será imprescindible instalar en nuestro CMS.
Por otro lado en el directorio projects encontrarás ejemplos de los proyectos en NextJS con HeadstartWP, esto es un buen punto de partida para empezar un proyecto y aprender sobre el framework.
Donde se cuece todo es en packages, donde encontrarás diferentes packages como:
- core alberga lo más fundamental como las estrategias para el data fetching, componentes para los bloques Gutenberg, React hooks, etc. Además de una multitud de utilidades.
- next específico para NextJS donde se encuentran los handlers para el preview, el middleware por defecto, hooks para data fetching, etc.
- @10up/react-hooks, una variedad de hooks personalizados de React.
- @10up/next-redis-cache-provider, una alternativa al Controlador de Caché Incremental de Next.js que implica el cambio de la caché del sistema de archivos por Redis, a veces es necesario según la plataforma en la que la aplicación está alojada.
¿Por dónde empezar?
HeadstartWP tiene una amplia documentación donde puedes empezar de una manera sencilla siguiendo los pasos en la sección Getting Started
Te recomiendo que le eches un ojo al resto de la documentación para entender cómo funciona.
HeadstartWP tiene un futuro prometedor. En 10up tenemos varios proyectos en producción usando el framework y seguimos en activo con mejoras y nuevas propuestas, madurando el framework con casos reales. Es un framework con mucho potencial y espero poder escribir más sobre cómo trabajar con HeadstartWP y mejores prácticas que se irán perfilando.