Astro es una innovadora herramienta de desarrollo web que permite generar sitios estáticos de manera eficiente. A diferencia de otros frameworks, Astro procesa y entrega recursos sin incorporar JavaScript innecesario, lo que da como resultado archivos HTML y CSS puros. Esta característica no solo mejora el rendimiento de los sitios, sino que también amplia el rango de herramientas que los desarrolladores pueden usar con Astro, como React, Vue y Svelte.
¿Qué es el patrón de diseño Astro Idles?
El concepto de Astro Idles se refiere a un patrón de diseño que ayuda a optimizar el rendimiento de las aplicaciones web. Permite crear islas de componentes dentro de un sitio estático más grande, donde un componente específico puede tener interacciones y lógica ejecutada del lado del cliente. Esto es sumamente útil cuando necesitas que ciertas partes de tu aplicación tengan capacidad de interacción sin sobrecargar de JavaScript al sitio completo.
¿Cómo funciona la compilación de proyectos en Astro?
Al compilar un proyecto en Astro, se convierte la estructura de tu sitio en archivos estáticos, utilizando el comando npm run build. Durante este proceso, Astro detecta rutas dinámicas y genera archivos HTML y CSS. Aunque trabaja principalmente con recursos estáticos, puede incluir pequeñas cantidades de JavaScript (cuando es absolutamente necesario) en su carpeta dedicada. Esto garantiza que las partes dinámicas del sitio funcionen sin comprometer su eficiencia.
npm run build
¿Cómo crear componentes interactivos en Astro?
Para introducir interactividad en un sitio hecho con Astro, puedes utilizar un enfoque de "islas de componentes". Esto implica la creación de componentes que se ejecutan solo cuando es necesario. Un ejemplo típico sería implementar un componente React más robusto que interactúe con el usuario mediante interacciones específicas que operen en el cliente.
¿Cómo integrar componentes de React en Astro?
Para integrar un componente de React, como un header interactivo, en Astro, primero copia el componente necesario e instala cualquier dependencia. Puedes obtener componentes de librerías como Tailwind UI, importarlos a tu proyecto Astro y habilitar la ejecución del componente del lado del cliente para interactividad.
// Importar y utilizar un componente React en AstroimportHeaderTopfrom'./components/HeaderTop';<HeaderTop client:load />
¿Cómo activar la ejecución cliente en un componente de React?
Para activar interacciones de cliente en un componente React dentro de Astro, utiliza el marcador client:load. Esto le indica a Astro que el componente debe ejecutarse del lado del cliente, permitiendo que las acciones interactivas se realicen adecuadamente.
¿Qué ventajas aporta Astro al rendimiento web?
Una de las grandes ventajas de Astro es la forma en que optimiza el rendimiento de los sitios web. A través de la generación de contenido mayoritariamente estático, combinado con la habilidad de ejecutar componentes específicos del lado del cliente cuando se necesita, Astro consigue acelerar considerablemente el tiempo de carga y mejorar la experiencia del usuario.
¿Cómo se prepara un sitio para su despliegue en producción?
Para preparar un sitio creado con Astro para producción, se realiza una compilación generando archivos estáticos en la carpeta de distribución. Asegúrate de que todos los componentes interactivos estén configurados correctamente para ejecutarse como islas.
// Compilar para producción
npm run build
Después de la compilación, es importante revisar y optimizar elementos adicionales como SEO, RSS, Sitemap, entre otros, para asegurar que tu sitio tenga un rendimiento óptimo y buenos resultados en buscadores.
Astro presenta una revolucionaria forma de trabajar con proyectos web, combinando la simplicidad de sitios estáticos con la flexibilidad de componentes dinámicos. Explora sus capacidades y alcanza nuevos niveles de eficiencia en el desarrollo de tus proyectos web.
De forma predeterminada, un componente de framework no está hidratado en el cliente. Si no se proporciona la directiva client:*, tu HTML se representa en la página sin JavaScript.
Estos son los valores que puede tener la directiva client:
client:load: Cargue e hidrate el JavaScript del componente inmediatamente al cargar la página.
client:idle: Cargue e hidrate el componente JavaScript una vez que la página haya terminado con su carga inicial
client:visible: Cargue e hidrate el JavaScript del componente una vez que haya ingresado al viewport del usuario. Esto utiliza un IntersectionObserver internamente para realizar un seguimiento de la visibilidad.
client:media: client:media={string} carga e hidrata el componente JavaScript una vez que se cumple una determinada media query de CSS.
client:only: ¡Debes pasar el framework correcto al componente! Debido a que Astro no ejecuta el componente durante su compilación/en el servidor, Astro no sabe qué framework usa el componente a menos que se lo indiques explícitamente.
El término “Astro Island” se refiere a un componente de UI interactivo en una página HTML predominantemente estática. Pueden existir varias islas en una página, y una isla siempre se renderiza en forma aislada. Piensa en ellos como islas en un mar de HTML estático y no interactivo.
En Astro puedes utilizar cualquier framework de componentes de UI (React, Svelte, Vue, etc.) para renderizar islas interactivas en el navegador. Puedes “mix and match” (mezclar y combinar) diferentes frameworks en una misma página, o simplemente elegir tu favorito.
La técnica en la que se basa este patrón de arquitectura se conoce como hidratación parcial o selectiva. Astro aprovecha esta técnica para hidratar las islas automáticamente.
Comparto los recursos:
La pagina es Tailwind UI.
El Header del proyecto.
A mi al momento de querer generar el build me marco dos errores, los cuales solucione de la siguiente manera:
En el archivo index.astro principal agregue
slug={``item``?.frontmatter?.slug}
dentro del componente de la Card, porque me decia que era necesario.
Tambien en el layout dentro de array de los post, VSC agrego unknow al tipo de propiedad del item quedando de la siguiente manera.
Tuve el mismo error! en mi caso no me lo aceptó con los ```` asi que simplemente puse en Posts.astro. Y en index.astro (el principal) añadí el slug. Muy similar! Gracias por la ayuda
Muchas gracias por el aporte, me funcionó
Islands Architecture
✨ Concepto clave
Los patrones de diseño son aquellos que facilitan la reutilización de estructuras de software.
Los patrones de arquitecturas son aquellos que expresan un esquema organizativo y estructural fundamental para sistemas de software.
.
Siendo un término relativamente nuevo, se posee poca información de origen del patrón de arquitectura Islands. Dicho patrón, inicialmente fue llamado como patrón Component Islands, acuñado por la arquitecta de interfaz de Etsy, Katie Sylor-Miller, durante una reunión de presentación de producto.
.
La idea general de una arquitectura de Islas es la representación de páginas estáticas de HTML en el servidor e inyectar marcadores de posición o ranuras alrededor de regiones altamente dinámicas. Estos marcadores de posición contienen la salida HTML procesada por el servidor desde su destino correspondiente. Dichos destinos se “hidratan” en cliente por workers autónomos, reutilizando su HTML generado por el servidor en local.
.
Esto puede parecer similar a los micro-frontends a primera vista, ya que ambos enfoques comparten la idea de dividir las aplicaciones en unidades independientes, con la diferencia que los micro-frontends no suelen ser en contenido HTML estático.
.
Una analogía más cercana al enfoque de "islas" sería la mejora progresiva, a la que esencialmente estamos agregando hidratación SSR o Server-Side-Rendering. En la mejora progresiva tradicional, podríamos tener un <script> que busca un carrusel de imágenes en la página e instancia un complemento en él. En cambio, ese carrusel de imágenes se representaría en el servidor y se emitiría un <script> dedicado que carga la implementación del carrusel de imágenes y lo actualiza en el lugar para que sea interactivo.
.
📌 Enlace importante
Esta idea final sería la naturaleza final del Framework Qwik.
Framework reimagined for the edge! - Qwik
.
Beneficios de las Islas
Como es bien sabido, en comparación de arquitecturas SPA o Single-Page-Application, la "Hidratación Selectiva" es gratis, significando en el rendimiento y la resolución en el navegador del contenido.
.
La representación de páginas con una arquitectura de islas da como resultado que las partes dinámicas más pesadas de la página se inicialicen no solo progresivamente, sino por separado. Resultando en que las regiones individuales de la página se vuelven interactivas sin que sea necesario cargar nada más o a volver a desplegar una página debido a su ciclo de montaje.
.
Muchas aplicaciones con arquitecturas SPA, son penalizadas por su rendimiento y optimización de SEO. Con las Islas, el SEO es recompensado por su procesamiento de peticiones y velocidad por carga en el navegador.
.
📌 Enlace importante
Islands Architecture - JASON Format
.
yo tengo una duda en cuanto a astro y todo este tema de los sitios estaticos, supongamos el ejemplo, yo tengo el backend de un blog, donde un endpoint es para obtener un listado de blogs, y otro endpoint es para obtener el detalle de un blog, en astro como se integraria esto? ajuro tendria que usar vue, react, etc.?
Hay que hacer llamadas al API con fetch por ejemplo con astro para traer esos datos y poder renderizarlos.
Muy poderoso Astro!
En Astro, el atributo client: se utiliza para habilitar la interactividad de los componentes en el navegador. Los valores que se pueden agregar son:
load: El componente se carga y se activa en el cliente al momento de cargar la página. Ideal para componentes que necesitan ser interactivos desde el principio.
visible: El componente se activa cuando entra en la vista del usuario. Útil para optimizar la carga de componentes que no son críticos.
idle: El componente se activa cuando el navegador está inactivo, lo que permite cargar componentes de forma más eficiente sin comprometer la experiencia del usuario.
Estos valores existen para optimizar el rendimiento y la interactividad de las aplicaciones web, permitiendo que Astro entregue principalmente contenido estático, mientras que solo los componentes necesarios se convierten en dinámicos.
muy bueno! muy parecido a nextjs con los server y client components
Tuve el siguiente error al usar npm run build. Para corregirlo, eliminé la carpeta node_modules y cambié la versión de @astrojs/mdx a la ^0.19.6 en package.json.
