Astro – Tecnología de Islas en Nombre de la Optimización

Hola a todos. Bienvenidos y gracias por unirse hoy. Mi nombre es Szymon Chmal y soy un Desarrollador Senior de React Native en CallStack. Hoy voy a presentarles una herramienta poderosa en el desarrollo web moderno llamada ASTRA. Exploraremos cómo optimiza la entrega de contenido mientras proporciona la flexibilidad de los marcos de JavaScript modernos. Ya sea que estés construyendo aplicaciones interactivas o sitios estáticos impulsados por contenido, ASTRA podría ser la solución que has estado buscando.

Así que vamos directo al grano. Todos hemos encontrado diferentes tipos de experiencias web. Por un lado, tenemos aplicaciones altamente interactivas y por otro lado, sitios que son mayormente estáticos y solo sirven contenido. La pregunta es, ¿cómo encuentras el equilibrio adecuado entre sobrecargar el navegador con JavaScript y mantener las cosas rápidas? Hablemos de las opciones que tenemos en el ecosistema actual.

Ahora mismo, tenemos algunas opciones bien conocidas para construir aplicaciones web. Tienes marcos con todas las funciones como Next.js o Remix que son geniales para aplicaciones altamente interactivas pero a veces pueden parecer excesivos para sitios estáticos. Luego está Gatsby, que tuvo su momento pero aprenderlo puede ser un poco demasiado. Y seamos honestos, se siente un poco abandonado en estos días. Y luego tenemos generadores de sitios estáticos clásicos como Jackal, que funcionan perfectamente hasta que necesitas agregar cualquier elemento interactivo. Entonces, ¿qué pasa si necesitamos tanto velocidad como flexibilidad? Ahí es donde ASTRA entra en juego porque te permite crear sitios web estáticos increíblemente rápidos sin necesidad de ningún JavaScript por defecto. Pero lo que realmente lo hace destacar es que aún puedes añadir interactividad con hidratación selectiva, lo que significa que solo cargas JavaScript cuando es absolutamente necesario. Este enfoque es perfecto para sitios que son mayormente estáticos pero tienen algunas características interactivas. Te da lo mejor de ambos mundos, rendimiento y flexibilidad.

Y como podemos ver, ASTRA no es exactamente un recién llegado en el mundo del desarrollo web. De hecho, ya ha sido confiado por algunos de los nombres más grandes de la industria. Por ejemplo, empresas como Microsoft y Porsche han utilizado ASTRA para construir sus sitios web, lo que dice mucho sobre su fiabilidad y rendimiento. Entonces, ¿qué hace único a ASTRA? En primer lugar, está construido pensando en páginas impulsadas por contenido, perfecto para blogs, portafolios o sitios web corporativos que no necesitan toneladas de JavaScript para funcionar. Aún puedes usar tus bibliotecas de UI favoritas como React, Vue o SWAT, pero ASTRA se encarga de entregar HTML puro por defecto. También adopta la arquitectura de aplicación multipágina, lo que significa que cada interacción resulta en una recarga completa de la página, lo cual es a menudo más rápido y simple para contenido mayormente estático. Se trata de reducir la carga de JavaScript mientras te da la flexibilidad de añadir elementos dinámicos cuando sea necesario. Y una de las mejores cosas de ASTRA es lo flexible que es cuando se trata de integrar bibliotecas. Ya sea que seas fan de React, Solids, tal vez Vue, o simplemente trabajes con Tailwind, ASTRA te tiene cubierto, porque con solo unos pocos comandos puedes añadir fácilmente esas bibliotecas a tu proyecto sin necesidad de reconfigurar todo. Eso te da la libertad de usar las herramientas que amas sin sacrificar la simplicidad y la velocidad que ASTRA trae a la mesa. ASTRA mantiene las cosas simples con enrutamiento basado en archivos.

Esto significa que la estructura del directorio de páginas de fuentes de tu proyecto refleja directamente las URLs de tu sitio. Así que, por ejemplo, si creas un archivo about-me.astra en la carpeta de páginas, automáticamente se vuelve accesible en mysite.com about-me. Pero no se detiene ahí. ASTRA también soporta rutas dinámicas, que son útiles para crear páginas sobre la marcha. Por ejemplo, un archivo llamado slug.astra en el directorio de blog podría generar una URL única para cada entrada de blog basada en su slug. También puedes usar rutas de reserva con una estructura como ...path.astra para capturar múltiples variaciones de una ruta, lo cual es genial para manejar jerarquías de contenido complejas. Y lo mejor de todo, puedes construir páginas con componentes de ASTRA, HTML, Markdown, o, por ejemplo, MDX. Este enfoque mantiene tu flujo de trabajo limpio y eficiente, permitiéndote centrarte en lo que realmente importa, tu contenido.

Ahora, hablemos de los componentes de ASTRA. Por defecto, los componentes de ASTRA se ejecutan completamente en el sitio del servidor, lo que significa que no envían ningún JavaScript al cliente a menos que especifiques lo contrario. Esto es un cambio radical para el rendimiento. Por ejemplo, puedes importar un componente de ASTRA como un banner y simplemente usarlo en tu plantilla. También puedes mezclar componentes de React o cualquier otra biblioteca de UI que te guste, dándote la flexibilidad de usar las mejores herramientas para el trabajo.

Lo genial es que puedes acceder a variables del lado del servidor directamente en tus componentes, permitiendo la generación de contenido dinámico sin sobrecarga adicional. También puedes emplear directivas especiales de ASTRA para aún más control, como aplicar condicionalmente clases basadas en props, lo que hace increíblemente sencillo crear experiencias de usuario ricas e inmersivas sin sobrecargar tu sitio con JavaScript innecesario.

Ahora, aunque ASTRA se trata de mantener las cosas ligeras, puede haber momentos en los que necesites añadir un poco de interactividad a tus páginas. Ahí es donde entra en juego la clásica etiqueta script. Por ejemplo, si quieres añadir un efecto de confeti divertido cuando se hace clic en un botón, puedes hacerlo fácilmente importando un módulo directamente en tu componente. Simplemente toma los botones del DOM y adjunta oyentes de eventos que desencadenen el efecto de confeti. Este enfoque te permite mejorar la interacción del usuario sin comprometer el rendimiento general de tu sitio.

Cambiemos de marcha y hablemos de las colecciones de contenido. Esta característica es increíblemente útil para organizar documentos y asegurar que todo esté validado correctamente. Con las colecciones de contenido, puedes definir el tipo y el esquema para tu contenido, lo que ayuda a mantener la consistencia en todo tu sitio. Y así es como funciona. Puedes definir una colección de contenido, lo cual es realmente simple. Primero, importa la función defineCollection y úsala para describir tu colección. Necesitarás proporcionar un esquema que se aplicará a todos los archivos Markdown dentro de la colección. Y finalmente, necesitas exportarlo en el objeto collections. Eso es todo. ¡Hecho!

Está diseñado para manejar estos escenarios sin problemas, permitiéndote integrar elementos dinámicos donde sea necesario, mientras mantienes el rendimiento general y la simplicidad del framework. Astro te permite definir áreas específicas, conocidas como islands, en tu página que pueden volverse interactivas. Por ejemplo, si tienes una publicación de blog mayormente estática, puedes añadir un componente dinámico como una sección de comentarios interactiva o un widget de chat en vivo. ¿Y la mejor parte? Puedes controlar cuándo se cargan estos componentes. Por ejemplo, puedes configurar un componente para que se cargue tan pronto como la página se carga, o solo cuando se vuelve visible en el viewport. Este enfoque minimiza la huella de JavaScript, cargando interactividad solo cuando es necesario.

Y el enfoque de Astro Islands funciona entregando las partes estáticas de la página desde un CDN para una carga rápida. Cuando un componente necesita interactividad, el navegador obtiene el JavaScript necesario desde la misma fuente. La clave aquí es que los usuarios pueden ver el contenido inmediatamente, sin esperar a que la hidratación se complete. El inconveniente de este enfoque ocurre cuando necesitas mostrar datos dinámicos. Un truco ocurre porque los componentes hidratados solicitan datos del servidor, por ejemplo en formato JSON, y luego los muestran al usuario. Este patrón introduce una penalización de rendimiento, ya que JavaScript se usa únicamente para obtener datos, lo cual es innecesario y añade sobrecarga extra. Y ahí es donde entran las Server Islands. Usando la directiva server deferred, puedes decirle a Astro que omita el renderizado inicial de componentes específicos. En lugar de renderizarlos de inmediato, Astro pospone inteligentemente el renderizado a un momento posterior, optimizando el rendimiento y reduciendo la sobrecarga innecesaria de obtener datos dinámicos con JavaScript.

¿Qué significa esto para tu sitio? Te permite almacenar en caché la página estática detrás de un CDN, asegurando que tu contenido principal se cargue casi instantáneamente, completamente con un marcador de posición mientras los elementos dinámicos se preparan. Una vez que el HTML dinámico está listo, reemplaza la server island en la página con el contenido renderizado real. Este enfoque ofrece a tus usuarios una experiencia rápida y fluida desde el principio, mientras aún te permite entregar actualizaciones interactivas frescas sin esfuerzo. Así que, aquí, usamos client load para hacer que el componente de carrusel de imágenes sea interactivo inmediatamente después de que la página se carga. Esto es ideal para componentes que necesitan estar listos para la interacción del usuario de inmediato. Con client idle, le decimos al componente que espere hasta que el navegador esté inactivo o hasta que hayan pasado 500 milisegundos antes de hacerlo interactivo. Esto ayuda a priorizar recursos más críticos mientras aún prepara la interactividad poco después. Con client visible, el componente de carrusel de imágenes solo se vuelve interactivo cuando el usuario realmente lo desplaza a la vista. Esta es una gran optimización de rendimiento, cargando JavaScript solo cuando es necesario. Con client media, el componente se vuelve interactivo solo si el ancho de pantalla del dispositivo es de 1280 píxeles o menos. Esto asegura que la interactividad se active según las necesidades de diseño responsivo. Con client only, el componente se renderiza exclusivamente en el lado del cliente, porque, por ejemplo, puede usar algún tipo de APIs del navegador. Y por último, pero no menos importante, con server defer, podemos decir que este componente debe renderizarse exclusivamente en el lado del servidor y luego enviarse al cliente. Por supuesto, podemos proporcionar un fallback, que se incluirá en el contenido inicial entregado desde el CDN. Vamos a explorar un desarrollo emocionante en el diseño web, la View Transitions API.

Exploremos un desarrollo emocionante en el diseño web, la View Transitions API. Hasta hace poco, crear animaciones ricas durante la navegación en aplicaciones de múltiples páginas era un desafío, a menudo limitado a aplicaciones de una sola página como las construidas con Remix o Next.js. La introducción de la View Transitions API lo cambia todo. Esta característica innovadora permite a los desarrolladores crear animaciones suaves y visualmente atractivas durante las transiciones de página en MPA, mejorando enormemente la experiencia del usuario.

Astra soporta completamente la View Transitions API, y lo mejor de todo, la hace accesible en todos los navegadores. Sin embargo, hay un inconveniente en su implementación. Para usar View Transitions, necesitas importar el componente View Transitions y básicamente colocarlo en el head de tu página Astra. También puedes definir transiciones en elementos específicos dentro de tus páginas, y esto creará animaciones suaves durante los cambios de página, mejorando la experiencia del usuario en general.

Ahora, aquí hay un punto importante. Cuando las View Transitions están habilitadas, la navegación realmente ocurre en el servidor en el lado del cliente. Así es como Astra asegura la compatibilidad en todos los navegadores. Sin embargo, apunta a mantener el mismo comportamiento que una aplicación de múltiples páginas, lo que significa que nuestros componentes del cliente se vuelven a montar en cada navegación. ¿Podemos optar por no tener este comportamiento? Podemos, y es realmente simple. Necesitamos agregar el atributo TransitionPersis a nuestro componente y eso es todo. Esto significa que el componente mantendrá su estado, como puedes ver en el video. En algún momento, cuando las View Transitions alcancen una implementación básica en todos los navegadores, Astra planea eliminar esta solución de aplicación de una sola página. Por ahora, sin embargo, usar el atributo TransitionPersis es la única manera de lograr este comportamiento de manera efectiva.

Bien, ahora abordemos una pregunta importante. ¿Qué framework deberías elegir? ¿Astra? ¿Next.js? ¿Remix? En el panorama digital actual, el rendimiento lo es todo. Los usuarios esperan que los sitios web carguen rápidamente, respondan al instante y ofrezcan interacciones fluidas. Aquí es donde el tamaño de una aplicación web puede volverse crítico.

Astra se destaca como una elección fantástica cuando se trata de optimizar el tamaño. Su arquitectura está diseñada para minimizar la cantidad de JavaScript enviado al cliente por defecto. Este enfoque en HTML ligero significa que los usuarios observarán tiempos de carga más rápidos y una experiencia de usuario más receptiva, lo cual es esencial para retener visitantes.

Además, consideremos el costo real del JavaScript. Cuando un navegador carga una página web, tiene que descargar, analizar y ejecutar el código JavaScript. Cada uno de estos pasos toma tiempo y recursos. Para los usuarios en dispositivos de gama baja o aquellos con conexiones a internet más lentas como 3G o incluso 2G, esto puede llevar a retrasos frustrantes. La verdad es que no todos tienen acceso a los últimos iPhones o redes 5G ultrarrápidas. En muchas partes del mundo, los usuarios todavía dependen de dispositivos más antiguos y conexiones a internet más lentas. Para estos usuarios, un JavaScript pesado puede significar una experiencia lenta, lo que puede desalentarlos de regresar a tu sitio.

Además, el impacto del JavaScript no se trata solo de velocidad. También puede afectar la vida de la batería en dispositivos móviles. Un exceso de JavaScript puede agotar las baterías más rápido, haciendo aún más crítico considerar el rendimiento al dirigirse a una audiencia diversa. Además, la investigación ha demostrado que la velocidad de carga influye significativamente en el comportamiento del usuario. Por ejemplo, un retraso de solo un segundo en la carga de la página puede llevar a una disminución en las tasas de conversión de alrededor del 5%. Además, casi el 70% de los consumidores admiten que la velocidad de una página web afecta directamente su disposición a realizar una compra. Y personalmente, soy uno de esos consumidores. Cuando encuentro una tienda que carga demasiado lento, a menudo me encuentro buscando una alternativa. Es frustrante, y sé que no estoy solo en este sentimiento.

Pero con Astra, puedes mitigar esos problemas. Al enfocarte en la entrega eficiente de contenido y reducir el JavaScript innecesario, creas una experiencia más rápida y amigable para el usuario que cumple con las expectativas de los diversos usuarios web de hoy. En un mundo donde el rendimiento puede hacer o deshacer un sitio, Astra te permite ofrecer experiencias de alta calidad que mantienen a los usuarios comprometidos. Y la verdad es que internet es predominantemente estático. En muchos casos, la interactividad compleja del lado del cliente es realmente innecesaria. Simplificar nuestras aplicaciones web puede llevar a tiempos de carga más rápidos y una mejor experiencia de usuario. Podemos enfocarnos solo en entregar contenido esencial sin abrumar a los usuarios con características excesivas.

Ahora que hemos explorado las fortalezas de Astra, hablemos de cuándo es la elección correcta para tus proyectos. Astra es particularmente adecuada para una variedad de aplicaciones, especialmente aquellas que priorizan la entrega de contenido y el rendimiento. Así que si estás construyendo una tienda en línea, los tiempos de carga rápidos son críticos, y Astra permite crear una experiencia de compra fluida sin carga de JavaScript. Para los profesionales creativos que muestran su trabajo, Astra proporciona una plataforma para mostrar visuales impresionantes mientras mantiene un rendimiento rápido. Los bloggers también se benefician de la capacidad de Astra para entregar contenido rápida y eficientemente. Los lectores aprecian los artículos que cargan rápidamente, lo que los mantiene comprometidos y los anima a explorar más de tu contenido.

Al lanzar una campaña de marketing, tener una página de destino ultrarrápida puede marcar toda la diferencia. Las optimizaciones de Astra ayudan a impulsar las conversiones al asegurar que los visitantes no abandonen debido a tiempos de carga lentos. Para los componentes que desean presentar una presencia en línea pulida, Astra ayuda a crear sitios profesionales que entregan información de manera rápida y efectiva, reflejando positivamente en tu marca. Y, aunque frameworks como Naked.js son poderosos y versátiles, pueden no ser el framework necesario para cada proyecto, a veces una herramienta especializada como Astra es la mejor opción, especialmente cuando la velocidad y la simplicidad son primordiales. Ambos frameworks tienen sus fortalezas, pero atienden a diferentes necesidades dependiendo del tipo de proyecto en el que estés trabajando.

Naked.js está diseñado para construir aplicaciones complejas con capacidades robustas de renderizado del lado del servidor. Sin embargo, este nivel de poder a menudo viene con complejidad, especialmente cuando se trata de configuración e implementación. Por otro lado, Astra brilla cuando se trata de velocidad y simplicidad. Mientras que Naked.js requiere configuraciones intrincadas y a menudo te ata a un proveedor de nube específico como, por ejemplo, Vercel, el enfoque de Astra permite una implementación más sencilla. Las islas de servidor de Astra proporcionan una solución única que permite que los componentes renderizados en el servidor se integren dentro de páginas estáticas, haciéndola flexible en varios entornos de alojamiento sin depender de características específicas de la nube. Esto significa que puedes implementar fácilmente tu sitio en cualquier lugar, manteniendo el rendimiento sin las complejidades que Naked.js podría introducir.

Y hemos llegado al final de nuestra presentación, y me gustaría agradecer a cada uno de ustedes por estar aquí hoy. Aunque Astra tiene mucho más que ofrecer, mantuve el contenido breve para mantenernos en el camino. Les animo a explorar el sitio web de Astra y sumergirse en la documentación para más detalles. Si tienen alguna pregunta, idea o experiencia para compartir sobre el desarrollo web con Astra, me encantaría escuchar de ustedes. No duden en ponerse en contacto si desean saber más. Gracias una vez más por su tiempo y atención.