Cómo construir webs ultrarrápidas y administrables con Astro y Strapi

Hoy vamos a hablar sobre desarrollo web. Lo haremos con Nerea Gómez e Igor Nieto, integrantes del equipo de desarrollo de la agencia, con quienes charlaremos sobre Astro y Strapi. Ahondaremos en cómo el uso combinado de estas tecnologías aporta rendimiento y flexibilidad, lo cual contribuye a optimizar las experiencias digitales que construimos en Worköholics.

Sí, hoy hablaremos de desarrollo web. Y, aunque usemos ciertos tecnicismos, nuestro objetivo es que esta entrada sea comprensible y de utilidad para todo el mundo. Al fin y al cabo, el desarrollo web no es una disciplina aislada, sino que las decisiones que se toman desde el código, tiene un impacto directo en ámbitos como el diseño, la comunicación, el SEO, la gestión, o incluso la labor comercial.

En caso de duda (consulte con su farmacéutico) con alguno de los conceptos empleados a lo largo de la entrevista, puedes consultar al glosario de términos relacionados con el mundo del desarrollo web que incluimos al final.

Ahora, eso sí, empecemos por el principio: ¿qué es Astro?

Igor: Astro es un framework de desarrollo web que, a diferencia de React, Angular, Gatsby u otras herramientas ya conocidas del ecosistema de JavaScript, nos presta una increíble flexibilidad a la hora de escoger la estrategia de renderizado (proceso que permite visualizar un gráfico, objeto o escena en el ordenador) o configurar diferentes orígenes de datos. Además, es capaz de crear las llamadas “islands” con las que podremos desarrollar componentes o funcionalidades aisladas desarrolladas en diferentes frameworks.

Entonces, ¿qué diferencia a Astro de otros frameworks?

Igor: Yo diría que Astro es una herramienta genial que convive perfectamente con otros frameworks. En ningún caso enfrentaría Astro a otros frameworks como React, Angular, Vue o Svelte. Precisamente Astro es una herramienta que nos permite utilizar diferentes frameworks como parte de un mismo proyecto. Por otro lado, podemos seguir diferentes estrategias de renderizado dependiendo del contexto del proyecto. A través de la configuración inicial podremos escoger entre Server Side Rendering o Static Site Generation.

¿Cuáles son sus ventajas? ¿Y sus desventajas?

Igor: Una de las ventajas de Astro es su curva de aprendizaje y la facilidad de manejar el sistema de templates del mismo. Además, cuenta con amplia documentación, un ecosistema de addons o plugins muy útiles. Es un proyecto de código abierto en continuo desarrollo que, a pesar de ser joven, cuenta con una amplia comunidad de desarrollo.

Como desventaja, y aunque pueda parecer contradictorio, su gran flexibilidad nos puede llevar a errar a la hora de seleccionarlo como solución para un proyecto. Por ejemplo, aunque Astro pueda ejecutar código del lado del cliente, en ningún caso lo utilizaría para crear una SPA (Single Page Application) ya que esa no es su finalidad y existen otros frameworks como Angular o React que se adaptan mucho mejor a esta casuística.

¿Y Strapi, qué es? ¿Para qué sirve?

Nerea: Strapi es un CMS headless superpotente de código abierto 100% JavaScript. Está totalmente desacoplado del front por lo que nos permite a las desarrolladoras crear una API, extender o crear endpoints o crear una estructura de datos de forma rápida y sencilla.

Además, es posible gestionar el contenido de una aplicación o una web de forma sencilla sin necesidad de un desarrollo extra. Ya de base, Strapi te provee de funcionalidades básicas como la gestión de roles o el envío de emails que de primeras pueden ser funcionalidades complejas de abarcar.

Vale, ¿pero qué es exactamente un CMS headless?

Nerea: Se le dice CMS headless a Strapi porque es un CMS que no depende de nadie, es decir, de un front (la parte que ve el usuario). Está totalmente desacoplada y separada del front. Por así decirlo, tendríamos una web y un administrador de contenido que podrían convivir por separado y no tendrían dependencia el uno del otro. A la hora de desarrollar, en relación con la escalabilidad de la web o app, o ante posibles caídas de la API, sería una ventaja brutal.

¿Por qué es positivo que Strapi sea de código abierto?

Nerea: Tener la libertad de ver cómo funciona el programa y sus entrañas es genial. Cambiarlo o extenderlo para hacer lo que deseemos, colaborar en una comunidad y nutrirse de las contribuciones de otras desarrolladoras es lo que hace bonito que sea open source.   Y es que, las desarrolladoras nos exponemos cada día a nuevos retos y funcionalidades, por lo que es muy importante que haya una comunidad grande en la que apoyarse.

A grandes rasgos, ¿cómo funciona Strapi?

Nerea: Básicamente, Strapi funciona utilizando una arquitectura basada en módulos. Los módulos de Strapi son paquetes que contienen una funcionalidad específica, como un módulo de autenticación de usuario o un módulo de administración de contenido. Estos módulos se pueden agregar o quitar según sea necesario, lo que aporta una gran flexibilidad y personalización en el desarrollo de aplicaciones.

Además, las desarrolladoras también podemos crear y administrar su contenido a través de una interfaz de usuario fácil de usar.

¿Cómo se integran Strapi y Astro?

Igor: Lo bueno de Astro es su versatilidad. Es capaz de integrarse con diferentes orígenes de datos. Por ejemplo, podríamos consumir contenidos en un mismo proyecto desde un Markdown, JSON, una API… En este caso en concreto, Strapi se expone a través de una REST API sobre la que tendremos total control, pudiendo, por ejemplo, configurar la visibilidad de cada uno de sus endpoints.

¿Por qué funcionan tan bien juntos Astro y Strapi?

Igor: En mi opinión, son 2 herramientas que están desarrolladas dando mucha importancia al rendimiento, por lo tanto, conseguimos webs o aplicaciones realmente rápidas. Además, con el mismo stack tecnológico, somos capaces de dar solución a los requisitos de proyectos muy diferentes. 

Nerea: La versatilidad de Astro respecto a otros js frameworks, junto con la potencia del CMS Strapi, hace que se trabaje de forma mucho más rápida y conseguir resultados realmente increíbles. En definitiva, nos permite desarrollar sitios web con un gran rendimiento aun teniendo gran carga de datos o contenido.

¿Cuál es vuestra experiencia hasta ahora desarrollando con Astro+Strapi?

Igor: En la actualidad son varios los proyectos que hemos desarrollado con ambas tecnologías y prevemos que, ya sea en conjunto o por separado, los seguiremos utilizando muy a menudo para solventar diferentes casuísticas que tenemos en la agencia. Además, Strapi nos permite desarrollar sobre él y extender sus funcionalidades para adaptarlas a nuestras necesidades, siendo un CMS realmente poderoso.

Nerea: La verdad es que está siendo una experiencia muy gratificante por la facilidad y versatilidad de las dos tecnologías. Es muy gratificante obtener resultados que a primera vista pueden ser complejos de conseguir, pero que Strapi y Astro resuelven de forma sencilla y rápida. Es una gran solución para frontend developers que necesitan crear alguna API para sus aplicaciones.

¿En qué tipo proyectos es buena idea utilizarlos? ¿En cuáles no lo es?

Igor: Para valorar cuándo utilizar esta combinación deberíamos tener en cuenta muchos factores. Por ejemplo, en el caso de Astro, si el objetivo es desarrollar una aplicación SPA que se va a ejecutar en cliente, no lo utilizaría. Por otro lado, en el caso de Strapi, al ser un CMS “developer first”, valoraría el nivel de conocimiento de la persona que gestionará el contenido, ya que muchas veces es determinante para inclinarse hacia Strapi, u optar por otros CMSs como WordPress, mucho más asentados en este sentido.

Nerea: Es una pregunta complicada, pero creo que utilizaría Astro en sitios web ricos en contenido, puesto que ahora mismo es su mayor ventaja competitiva: crear sitios web estáticos ultrarrápidos, enviando menos JavaScript en el momento de la compilación y convirtiendo todo en HTML estático. Esto último favorece mucho al SEO, por lo que también sería una buena opción para landings comerciales o donde se va a trabajar el posicionamiento.

¿Qué nivel de gestión de contenidos permite Strapi? ¿Es sencillo de administrar?

Igor: En cuanto a la gestión de contenidos no nos ponemos límites. Strapi nos da la capacidad de crear una arquitectura de datos muy completa a través de su interfaz a modo de plug & play, pero lo interesante es que podemos hacerla mucho más avanzada y customizada extendiendo el CSM y habilitando endpoints específicos para cada casuística. Además, Strapi tiene un sistema de roles que nos permite personalizar los campos u entidades que cada usuario puede ver y editar.

Nerea: Creo que a nivel de gestión, y basándome en lo que nos hemos encontrado en los proyectos en los que hemos integrado Strapi, no hemos encontrado ningún límite. Y es que Strapi permite una gran flexibilidad y personalización en el desarrollo.

¿Qué opina Google de todo esto? ¿Qué tal se llevan con el SEO?

Igor: En principio estas herramientas no tendrían ninguna restricción en cuanto al SEO, de hecho existen plugins de Astro que pueden ayudarnos en diferentes aspectos, como por ejemplo, a la hora de generar un sitemap, gestionar las cabeceras, etc. Incluso el compilador, es capaz de advertirnos si en algún caso hay atributos que debemos completar como el alt de una imagen. Por otro lado, Strapi tampoco tendría limitaciones al respecto, ya que, aunque no sean tan conocidos como los de WordPress, cuenta con algún plugin para gestionar contenidos relacionados con el posicionamiento orgánico. No obstante, lo más importante en este aspecto es tener en cuenta que hay un SEO técnico que debemos aplicar y que hay ciertos campos que deberemos habilitar en las entidades para que el equipo de comunicación pueda gestionarlos.

¿Echáis algo de menos cuando desarrolláis utilizando Astro + Strapi?

Igor: Por mi parte hay una cosa que me gustaría mejorar de Astro cuando se ejecuta en modo SSG. Su plugin de gestión de imágenes, basado en Sharp, nos permite optimizar las imágenes para diferentes resoluciones y formatos. Es una funcionalidad realmente útil, pero tiene una carencia: no es capaz de generar las imágenes optimizadas cuando se hidratan contenidos del lado del cliente. Esto se debe a que el compilador no es capaz de adivinar todas las imágenes posibles que se van a renderizar después de que el contenido estático se haya generado. Para solventar este problema en un proyecto real, hemos utilizado Sharp directamente para descargar y optimizar la totalidad de las imágenes del proyecto con el fin de poderlas renderizar, tanto de forma estática como dinámica, del lado del cliente.

Nerea: De momento no, pero sé que me queda mucho por descubrir y aprender tanto de Strapi como de Astro.

Glosario

• Framework: Un framework, ya sea JS o de cualquier otro lenguaje de programación, es una herramienta de desarrollo que nos permite agilizar el trabajo resolviendo muchas implementaciones y tareas que de otra manera tendríamos que generar adhoc o desde 0.
• JavaScript: JavaScript es un lenguaje de programación o scripting multiplataforma. Popularmente, es conocido por la capacidad de escribir programas interpretables por el navegador. Hoy en día su uso se extiende a multitud de aplicativos del ecosistema digital.
• Hidratación: Un componente, además de su definición, puede contar con parámetros que permiten cargar el contenido del mismo. A la acción de cargar el contenido de un componente le llamamos hidratación.
• Sitio estático: Es un sitio que se sirve de forma estática a través de HTML, CSS y JavaScript. La hidratación del contenido de dicho sitio se efectúa en tiempo de compilación, por lo que el servidor solo se encargará de servir archivos pre-generados.
• Backend: El desarrollo backend significa trabajar en software del lado del servidor, que se enfoca generalmente en los aspectos que el usuario no ve. Los desarrolladores backend se aseguran de que el sitio web funcione correctamente, centrándose en las bases de datos, la lógica, API etc.
• Frontend: El desarrollo web frontend es el desarrollo de la interfaz gráfica de usuario de un sitio web. A través de HTML, CSS y Javascript, o haciendo uso de diferentes frameworks, la desarrolladora frontend se encarga de dotar de interactividad a un proyecto.
• CMS: (Content Management System) es un sistema de gestión de contenidos, herramienta que nos permite gestionar los datos de un proyecto digital.
• API: (Application Programming Interface) es una API REST (también conocida como API RESTful) es una interfaz de programación de aplicaciones (API o API web) que se ajusta a las restricciones del estilo arquitectónico REST y permite la interacción con los servicios web RESTful. REST significa transferencia de estado representacional y fue creado por el científico informático Roy Fielding.
• Markdown: Markdown es un lenguaje de marcado ligero para crear texto formateado utilizando un editor de texto sin formato.
• Renderizar: Imprimir la interfaz a través de la pantalla.