Desde hace algún tiempo, WordPress headless se ha convertido en una de las tendencias más importantes en el ámbito del desarrollo web. Desvincular el front end y el back end puede llevar a un mayor grado de control, aplicaciones omnicanal y algunos usos interesantes de esta nueva tecnología.
Muchos desarrolladores han disfrutado experimentando con frameworks como Vue.js y React.js o incluso frameworks web como Django y Ruby on Rails, que suelen ser prácticamente incompatibles con WordPress.
Hay muchos frameworks de este tipo que funcionan bien con WordPress headless, pero SvelteKit es especial. Este framework de interfaz de usuario se creó específicamente para facilitar el desarrollo de aplicaciones web con código conciso y agradable. Puede agilizar fácilmente la funcionalidad que normalmente no funciona bien en un entorno desacoplado.
¿Quieres saber más? Vamos a repasar algunos conceptos básicos de WordPress headless, y luego te enseñaremos todo sobre SvelteKit y cómo hacerlo funcionar en tu entorno.
¿Qué es WordPress headless?
Es posible que ya conozcas la diferencia entre el front-end y el back-end de WordPress. El back end es donde van todas las operaciones subyacentes del CMS: creas entradas y páginas, instalas plugins, diseñas tu tema y cambias la configuración.
En el otro extremo, el front end es básicamente el sitio web que se muestra a los visitantes. WordPress, junto con sus temas y plugins, utiliza varias funciones como get_posts() para extraer y mostrar los datos que necesita.
Por ejemplo, el widget Entradas Recientes que se muestra en la página de inicio. Usando funciones como esa, accede a los datos desde el back-end y muestra tus últimas entradas en el front-end público.
El back end y el front end de WordPress están estrechamente entrelazados y, en muchos sentidos, dependen el uno del otro para funcionar, pero eso no significa que sean inseparables.
Ahí es donde entra el concepto de «WordPress headless»: con él, separas, o desvinculas, el back-end de WordPress. Entonces eres libre de conectarlo a cualquier tecnología front end que desees utilizar — no sólo PHP, sino cualquier framework de desarrollo web, o incluso una aplicación.
Esto tiene la funcionalidad adicional de permitirte utilizar el CMS de WordPress en múltiples canales. Transporta las entradas de tu blog u otros elementos del CMS a múltiples sitios web, aplicaciones móviles y donde quieras.
En general, WordPress headless te da más control sobre el CMS y la posibilidad de utilizar tecnologías que normalmente son incompatibles con él. También te evita tener que escribir toda una aplicación desde cero — puedes utilizar el CMS integrado de WordPress para hacer parte del trabajo.
¿Qué es la API REST?
Para que WordPress headless funcione, necesitas conectar tus aplicaciones mediante una API o Interfaz de Programación de Aplicaciones (Application Programming Interface). Las API permiten que dos aplicaciones diferentes interactúen entre sí, en este caso, el back-end de WordPress y tu aplicación personalizada del front-end.
Aunque hay muchos tipos de API, la API REST es una de las que vienen integradas en WordPress. Esto permite a las aplicaciones externas recuperar datos de forma segura desde el backend de WordPress sin necesidad de pasar por la interfaz de administración.
La API REST se utiliza en diversas funciones oficiales de WordPress, como el editor de bloques, y la mayoría de los temas y plugins que necesitan una API para funcionar la utilizan.
Esto también se aplica a las aplicaciones headless. Muchas de ellas utilizan la API REST para interactuar con WordPress, recuperando datos del back-end y mostrándolos dinámicamente a través de tu aplicación front-end.
La API REST proporciona endpoints que representan distintos recursos de WordPress, como entradas, páginas, usuarios, categorías, etc. Acceder a ellos te permite mostrar estos datos en el front-end.
Pero aunque puedes utilizar la API REST con ella, SvelteKit se basa principalmente en una tecnología diferente para muchas de sus funciones: GraphQL.
¿Qué es GraphQL?
GraphQL no es una API en sí, sino un lenguaje de consulta de API. A diferencia de las API REST tradicionales, en las que los clientes a menudo tienen que hacer varias peticiones a diferentes endpoints para obtener datos relacionados, GraphQL te permite recuperar todos tus datos en una sola petición.
En general, GraphQL se diseñó para permitirte hacer consultas más concisas en un framework rápido y optimizado. También es más fácil de aprender y menos complejo que la API REST.
Muchos frameworks de WordPress headless utilizan GraphQL en lugar de la API REST o junto a ella por estas razones. Aunque GraphQL no está incluido en WordPress como la API REST, hay plugins que puedes utilizar para incorporar esta funcionalidad al CMS.
Gracias al framework optimizado, evitas la obtención insuficiente o excesiva de datos. Puedes obtener los datos exactos que necesitas en una sola consulta, lo que es mucho más fácil para tu red y tu servidor.
¿Qué es SvelteKit?
SvelteKit es un framework web construido sobre Svelte, un framework front-end de código abierto similar a Next.js o React en su funcionamiento. Se construyó para agilizar el proceso de creación de aplicaciones web, y aunque no se construyó específicamente para WordPress headless, ésta es sólo una de las muchas aplicaciones posibles.
SvelteKit se construyó sobre HTML, CSS y Javascript — nada más. Esto hace que sea muy fácil de usar y que no dependa de ningún framework, por lo que puedes utilizarlo junto con otros frameworks para crear una aplicación front end totalmente dinámica o construir un sitio estático.
Svelte se lanzó en 2016 y sigue actualizándose activamente. El framework web SvelteKit llegó unos años más tarde, en 2020. Ambos son muy conocidos y apreciados en la escena del desarrollo web, ya que te permiten escribir código sencillo y elegante.
Por qué deberías utilizar SvelteKit para WordPress headless
Hay algunos aspectos de WordPress headless que puede resultar complicado poner en marcha. Gracias al diseño minimalista de SvelteKit, estos problemas se reducen al mínimo y hacen que la configuración de WordPress headless sea mucho más sencilla.
Éstas son sólo algunas de las funciones que ofrece SvelteKit.
- Sólo Javascript. A diferencia de otros frameworks, apenas tienes que preocuparte de dependencias y configuraciones confusas. A menudo, no se requiere ninguna configuración. SvelteKit funciona dondequiera que pueda ejecutarse Javascript.
- Sin dependencia de frameworks. SvelteKit se adapta fácilmente a otros frameworks gracias a su simplicidad. Integra cualquier tecnología en tu aplicación WordPress headless
- Extensible. Si SvelteKit no funciona perfectamente en tu entorno, es extremadamente fácil extenderlo y arreglar cualquier cosa que no funcione bien en tu configuración.
- Ligero y fácil de aprender. SvelteKit sólo se basa en Javascript, HTML y CSS. Es muy ligero en comparación con los frameworks tradicionales y es superfácil trabajar con él. Crea código limpio, elegante y sencillo con componentes compactos y concisos.
- Obtención de datos simplificada. GraphQL, con el que SvelteKit funciona bien, simplifica el proceso de obtención de datos de WordPress y te permite hacer consultas más concisas y eficientes.
- La autenticación es fácil. SvelteKit ha implementado recientemente la compatibilidad con NextAuth.js, que mantiene tus datos seguros y a salvo a la vez que es fácil de instalar.
- Renderizado del lado del servidor (SSR, Server side rendering) y generación de sitios estáticos (SSG, static site generation). SvelteKit no es sólo para sitios estáticos o aplicaciones dinámicas. Puedes hacer cualquiera de las dos cosas fácilmente utilizando este framework, ya que se proporcionan múltiples opciones de renderizado de páginas, y la generación de sitios estáticos se realiza fácilmente.
- Mapas del sitio (Sitemaps). Si alguna vez te has tirado de los pelos intentando conseguir un mapa del sitio que funcione en un sitio headless, no estás solo. SvelteKit te permite generar dinámicamente mapas del sitio con un endpoint.
- Comunidad animada. Hay un montón de fans de SvelteKit desarrollando aplicaciones con el software. Si necesitas ayuda o quieres charlar sobre el framework, es fácil encontrarlos por todo Internet y en las redes sociales. Incluso hay un servidor Discord con más de 60.000 miembros
Cómo crear un sitio WordPress headless con SvelteKit
¿Listo para empezar? Esta guía te guiará a través de la configuración de WordPress en un entorno local, la instalación de SvelteKit en tu máquina y el despliegue de tu instancia de WordPress headless en Kinsta una vez que hayas terminado.
Entremos de lleno.
Paso 1. Configurar un sitio de WordPress
Hay muchas formas de configurar una instancia local de WordPress en tu máquina. Si ya tienes una cuenta en Kinsta, puedes crear un sitio web con el panel de control MyKinsta o utilizar la API de Kinsta para configurar uno.
Para este tutorial, utilizaremos DevKinsta, un kit de desarrollo local de WordPress. No necesitas tener alojamiento Kinsta para utilizar DevKinsta — es totalmente gratuito.
Descarga DevKinsta desde el enlace anterior. Si necesitas ayuda con la instalación o quieres aprender a utilizarlo, consulta la documentación de DevKinsta.
Una vez que DevKinsta esté instalado y configurado, sigue estos pasos para crear un entorno local de WordPress.
- Crea un Nuevo Sitio de WordPress o un Sitio Personalizado si quieres cambiar ajustes como la versión PHP, el multisitio, etc.
- Introduce el nombre de tu sitio, el nombre de usuario, la contraseña y cualquier otra información, y haz clic en Crear sitio. Espera un poco mientras DevKinsta configura tu entorno local de WordPress.
- Accederás a la pantalla Información del sitio. Toma nota del host de tu sitio, ya que es la URL local a la que accedes para abrir tu sitio.
- Haz clic en Abrir sitio y navega hasta http://<tusitio>.local/wp-admin, o simplemente haz clic en WP Admin para abrir directamente esa página. Inicia sesión con las credenciales que has introducido antes.
Set 2. Prepara WordPress para el despliegue headless
En tu nueva pantalla de inicio del administrador, tendrás que seguir unos pasos adicionales para preparar tu instalación de WordPress para que funcione headless
SvelteKit se basa en GraphQL para muchas de sus funciones, así que tendrás que instalar WPGraphQL. Este plugin te permite utilizar el framework GraphQL para conectarte a tecnologías Javascript headless como NextJS, Gatsby y, por supuesto, SvelteKit.
Para ello, ve a Plugins > Añadir nuevo e instala WPGraphQL. Esto añadirá un IDE GraphiQL a tu barra de administración que podrás utilizar para escribir consultas GraphQL dentro de WordPress.
También tendrás que corregir tus permalinks. WordPress viene con enlaces permanentes simples por defecto, que no funcionan con la API JSON en la que se basa REST ni con el propio SvelteKit debido a las restricciones de Next.js.
Ve a Configuración > Enlaces permanentes y desactiva los enlaces permanentes Simples. Prueba los enlaces permanentes de nombre de entrada.
Para comprobar si ha funcionado, añade «/wp-json» a la URL de tu sitio local. Deberías ver el contenido de tu sitio como datos JSON.
Más tarde, tendrás que utilizar un plugin de redirección de sitio completo, como Redirection o All In One SEO Pro, para dirigir tu URL a la aplicación front-end que construyas. Instala y configura un plugin de redirección cuando estés listo para redirigir a los usuarios a tu aplicación SvelteKit.
Con esto, ya habrás terminado y estarás listo para instalar SvelteKit.
Paso 3. Configura tu entorno SvelteKit
Lo primero es lo primero, SvelteKit tiene algunos requisitos básicos del sistema, incluyendo Node 18.13 o superior. Como el framework es tan ligero, funcionará en casi cualquier sistema. Asegúrate de tener instalado npm junto a Node, ¡o no funcionará!
Ya puedes instalar SvelteKit en tu sistema. La documentación proporciona un recorrido completo, pero aquí tienes lo básico.
En primer lugar, vamos a instalar Svelte con el paquete create-svelte. Puedes llamar a tu proyecto («mi-svelte-app») como quieras. Este comando creará una aplicación Svelte con todos los ajustes básicos listos para funcionar.
npm create svelte my-svelte-appSe te presentarán varias preguntas; responde sí o no para crear tu entorno SvelteKit.
Necesitarás instalar algunos paquetes npm, así que accede a la raíz de tu proyecto con este comando (sustituye «mi-svelte-app» por el nombre que le hayas dado).
cd my-svelte-app/A continuación, ejecuta este comando para instalar los paquetes necesarios:
npm installY por último, ejecuta el servidor de desarrollo con este comando:
npm run devUna vez lanzado el servidor, puedes comprobar tu aplicación en curso en esta URL: http://localhost:3000
Ahora, en lugar de utilizar el renderizador de páginas por defecto, puedes cambiar al renderizador estático para generar un sitio SvelteKit estático.
Con esto, SvelteKit debería estar configurado correctamente, y puedes empezar a crear tu sitio headless.
Paso 4. Utiliza GraphQL para conectar SvelteKit y WordPress
Mientras experimentas con GraphQL y tu entorno SvelteKit, ten en cuenta estos consejos.
- Lee la introducción a Svelte/SvelteKit para comprender a fondo cómo funciona este framework. Este tutorial es interactivo; ¡puedes probar el código tú mismo!
- Puedes instalar el paquete GraphQL de SvelteKit si tienes problemas para configurar manualmente tu API GraphQL.
- Como parte de WPGraphQL, también puedes utilizar bloques Gutenberg a través de wp-graphql-gutenberg, que viene con el plugin estándar.
- Aunque puedes utilizar la API REST con SvelteKit hasta cierto punto, la funcionalidad ampliada de GraphQL funciona mejor con este framework. Si prefieres utilizar la API REST, echa un vistazo a esta demostración de SvelteKit para WordPress headless en GitHub, que utiliza la API REST para conectar las dos plataformas.
También deberías leer sobre la carga de datos y el enrutamiento para integrar SvelteKit y WordPress. Hay muchas formas de conectar con WordPress y crear una aplicación headless.
Paso 5. Despliega WordPress y SvelteKit en Kinsta
Una vez que hayas configurado un entorno headless y estés listo para desplegarlo, tendrás que dar dos pasos distintos: Desplegar WordPress y enviar el front-end a un sitio estático.
La parte de WordPress es muy sencilla. En DevKinsta, en la página Información del sitio, deberías ver un botón Enviar a staging. Tendrás que iniciar sesión con tus credenciales de Kinsta, pero después de eso, ya está todo hecho.
En cuanto a tu aplicación SvelteKit, también es bastante fácil. Kinsta ofrece alojamiento gratuito de sitios estáticos, que funciona muy bien con la mayoría de las aplicaciones creadas en SvelteKit. Aquí tienes cómo hacerlo.
- Envía tu aplicación SvelteKit a Bitbucket, GitHub o GitLab.
- Crea una cuenta Kinsta e inicia sesión en el panel MyKinsta.
- Accede a la cuenta Git de tu elección y autoriza a Kinsta.
- En MyKinsta, haz clic en Sitios estáticos y luego en Añadir sitio.
- Selecciona el repositorio de tu aplicación y añade la configuración de construcción adecuada.
- Haz clic en Crear sitio.
Si has creado una aplicación compleja en la que un sitio estático no es suficiente, es posible que desees desplegarla con el alojamiento de aplicaciones de Kinsta.
En cualquier caso, ¡tu sitio headless ya está desplegado! Ya puedes presumir de tu nueva aplicación WordPress headless.
Resumen
Hoy en día se habla mucho de WordPress headless, pero configurarlo no siempre es fácil. SvelteKit se creó específicamente para que el desarrollo web fuera más limpio y sencillo, y el framework es perfecto para configurar WordPress headless.
Ahora que sabes cómo crear una instancia local de WordPress, trabajar con SvelteKit y desplegar en Kinsta, estás listo para llevar WordPress headless al siguiente nivel.
Tanto si estás creando un sitio estático como una aplicación web dinámica, SvelteKit está especialmente indicado para la tarea. El alojamiento de aplicaciones o el alojamiento estático gratuito de Kinsta es el mejor lugar para alojarlo, gracias a su rapidísima infraestructura basada en Google Cloud y Cloudflare.
¿Has trabajado ya con SvelteKit? ¿Está el framework a la altura de las expectativas? ¡Comparte tu opinión en los comentarios!
Deja una respuesta