Astro 4.0

¡Presentamos Astro 4.0! Nuevas APIs, compilaciones más rápidas, documentación rediseñada, y una nueva herramienta de desarrollo única para Astro que mejora tu entorno de desarrollo local de formas nuevas y emocionantes.

¿Qué es Astro? Astro es el framework web para construir sitios web orientados a contenido incluyendo blogs, marketing, y e-commerce. Si necesitas un sitio web que cargue rápido con un gran SEO, entonces Astro es para ti.

Release highlights include:

• La Dev Toolbar de Astro
• Enrutamiento de internacionalización (i18n)
• Caché Incremental de Contenido (Experimental)
• Nuevas APIs de View Transition
• Logging rediseñado
• Documentación rediseñada

Astro 4.0 ya está disponible en npm. Visita astro.new para probar Astro 4.0 directamente en tu navegador, o ejecuta el siguiente comando en tu terminal para empezar con un nuevo proyecto local:

# Create a new Astro 4.0 project:
npm create astro@latest

La mayoría de las bases de código existentes no tendrán problemas al actualizar a Astro 4.0. Diseñamos este lanzamiento intencionalmente con los menos cambios de API posibles, con la mayoría de los cambios en la API de integración. Consulta la Guía de Actualización para un recorrido completo y un desglose detallado de cada cambio.

La Dev Toolbar de Astro

Astro 4.0 introduce la Dev Toolbar — una nueva y poderosa forma de mejorar y personalizar tu experiencia de desarrollo local en el navegador con Astro. Inspecciona tu página, detecta problemas de accesibilidad complicados, y extiende la propia barra de herramientas con apps personalizadas y herramientas de terceros.

La Dev Toolbar de Astro solo aparece en el navegador durante el desarrollo y nunca se incluye en tu compilación de producción final. La barra de herramientas se oculta en la parte inferior de tu página hasta que la necesitas. Pasa el cursor cerca, y la barra de herramientas aparece con varias aplicaciones diferentes disponibles:

Inspeccionar: Resalta las islas de componentes de UI interactivos en tu página. Esta app de la barra de herramientas fue diseñada para aprovechar la única arquitectura de islas de Astro. Resaltar islas en la página puede ayudarte a entender qué elementos son interactivos frente a HTML estático y ligero. Desde ahí, puedes ver las props y hacer clic para abrir el componente directamente en tu editor de código.

Auditar: Ejecuta una serie de pruebas que auditan la página en busca de problemas comunes de accesibilidad. Detecta imágenes sin texto alt o atributos de rol ARIA mal configurados instantáneamente sin salir del navegador.

Sentry: Nos asociamos con Sentry para diseñar la versión inicial de esta barra de herramientas. Sentry es la plataforma líder de monitoreo de apps para la web, y estaban emocionados de trabajar con nosotros en una nueva herramienta de debugging independiente para Astro. ¡Vuelve mañana, 6 de diciembre, para más información sobre nuestra asociación y el lanzamiento oficial de Spotlight.js!

Storyblok: Storyblok — nuestro Socio CMS Oficial — también ha publicado una app de barra de herramientas como parte de su integración oficial de Astro. En Astro 4.0, todos los usuarios de Storyblok deberían ver una nueva app en su barra de herramientas que proporciona acceso rápido a docs, tutoriales, y recursos de la comunidad para Storyblok + Astro. Espera que aterricen aún más características de CMS en el futuro.

Apps de Terceros: Los desarrolladores de Astro y los autores de integraciones de terceros pueden usar la nueva Dev Toolbar API para construir sus propias aplicaciones JavaScript integradas para desarrollo. Esto desbloquea una primitiva completamente nueva para construir herramientas de desarrollo, habilitando características como:

• Mostrar errores de testing y linting directamente en el navegador.
• Abre tu entorno de desarrollo a internet público con localtunnel.
• Acceso fácil a herramientas externas, como el optimizador de imágenes Squoosh.
• Paneles de administración internos del equipo para automatizar tareas comunes, como cambiar cuentas de usuario durante el desarrollo.

Descubre nuevas apps de la semana de lanzamiento para tu barra de herramientas en el catálogo de integraciones de Astro, y aprende cómo construir la tuya propia. En los próximos meses, continuaremos mejorando la barra de herramientas con nuevas características y APIs de terceros. Alternativamente, puedes actualizar tu configuración para desactivar la barra de herramientas de apps en un proyecto y ejecutar astro preferences disable devToolbar --global para desactivar la barra de herramientas globalmente para todos los proyectos en tu máquina.

Enrutamiento de Internacionalización (i18n)

Como framework web para sitios web orientados a contenido, nos preguntan mucho sobre internacionalización. Manejar la internacionalización (a menudo referida como “i18n”) como desarrollador web puede significar mucha complejidad adicional para tu base de código: enrutamiento, redirecciones, traducciones, manejo de enlaces relativos…

Astro 4.0 introduce nuevo enrutamiento de internacionalización para ayudarte a construir sitios web globalmente accesibles con menos complejidad. Aprovecha las nuevas características de Astro como el enrutamiento i18n automático y funciones helper de bajo nivel para trabajar con URLs.

El nuevo soporte de enrutamiento integrado de Astro te permite definir tus idiomas mediante configuración central:

import { defineConfig } from "astro/config"
export default defineConfig({
  i18n: {
    defaultLocale: "en",
    locales: ["en", "es", "pt-br"]
  }
})

Personaliza tu comportamiento con:

• Fallbacks para cuando el contenido no está disponible en cierto idioma
• Comportamiento de prefijo para añadir el nombre del idioma en la URL
• Aliasing para idiomas comunes y códigos de idioma

Para compilaciones 'server' con renderizado del lado del servidor (SSR) Astro detecta automáticamente el idioma preferido del usuario para que puedas adaptar aún más tu contenido, añadir redirecciones, o personalizar aún más el manejo de rutas.

El soporte de enrutamiento de internacionalización se añadió originalmente como característica experimental en Astro 3.5. Hoy, pasa al lanzamiento estable en Astro 4.0. Lee la nueva guía de Internacionalización de Astro para saber más y probar las nuevas APIs.

Caché Incremental de Contenido (Experimental)

Astro 4.0 introduce el Caché Incremental de Contenido como una nueva característica experimental para acelerar drásticamente el rendimiento de compilación para sitios web grandes.

La base de código de un sitio web a menudo tarda más en compilarse a medida que crece con el tiempo. Los sitios web estáticos sufren este problema aún más drásticamente debido a la regeneración de las mismas páginas en cada compilación. En Astro 4.0 decidimos introducir caché para ayudar a reducir la cantidad de trabajo duplicado e innecesario dentro del comando astro build.

Habilitar el caché de contenido en la base de código real de Astro Docs hizo que el paso relevante en astro build bajara de 133.20s a 10.46s, aproximadamente 92% más rápido. El tiempo de compilación de extremo a extremo se redujo de 4mins 58s a poco más de 60s, para un tiempo total de compilación que fue 80% más rápido. Hemos visto resultados igualmente impresionantes reportados en otros escenarios reales.

El caché incremental de contenido se integra con la Content Collections API. Como Astro es dueño de las APIs para acceder y gestionar tu contenido dentro de una colección, nuestra compilación puede rastrear de forma segura los cambios dentro de una colección usando un manifiesto de compilación interno. Astro puede revisar el caché en cada compilación y reutilizar las entradas de contenido sin cambios.

El soporte experimental para el caché incremental de contenido se introdujo por primera vez en Astro 3.5 bajo el nombre “Content Collections Build Cache.” Esta característica sigue siendo experimental en 4.0 mientras continuamos finalizando el comportamiento del caché. Si te sientes experimental, habilita experimental.contentCollectionCache en la configuración de tu proyecto hoy para compilaciones más rápidas.

Nuevas APIs de View Transition

Astro 3.0 presentó View Transitions al mundo como una nueva API para construir experiencias interactivas tipo app con solo HTML renderizado en el servidor y JavaScript mínimo del lado del cliente. Con View Transitions en Astro, puedes hacer cosas como:

• Anima la navegación entre diferentes páginas sin enviar una SPA pesada.
• Persiste UI con estado entre páginas, como reproductores de video y mapas.
• Transforma un elemento común de una página a otra, automáticamente.
• Desliza y desvanece elementos para darle aún más personalidad a tu página.

Desde el lanzamiento original de View Transitions, hemos continuado mejorando nuestro soporte. Astro 4.0 lleva View Transitions un paso más allá con APIs más configurables y nuevos casos de uso emocionantes:

• Formularios: View Transitions ahora puede interactuar con formularios HTML estáticos y componentes de formulario dinámicos del lado del cliente, disparando una transición en el envío del formulario en lugar de navegación por enlaces.
• Prefetching: Ahora puedes especificar que un enlace debe ser prefetched al hacer hover, tap, o al hacerse visible en la página. También puedes habilitar/deshabilitar el prefetching en un enlace individual.
• Anunciante de Rutas: Una característica integrada para tecnologías asistivas.
• Una API de JavaScript de bajo nivel navigate() que puedes usar para disparar la navegación manualmente.
• Un sistema completo de eventos del ciclo de vida al que puedes conectarte para personalizar la carga. Incluso puedes usar esto para reemplazar el algoritmo de intercambio de elementos integrado por uno propio.

Continuaremos abogando por el poder de View Transitions y su capacidad para ofrecer la experiencia de una SPA pesada del lado del cliente con solo HTML renderizado en el servidor y un poco de JavaScript. ¡Más características y mejoras están en camino!

El equipo core de Astro quiere dar un enorme agradecimiento a @martrapp por sus contribuciones y trabajo para implementar estas nuevas APIs en Astro 4.0. Lee la guía actualizada de View Transitions o el nuevo tutorial para saber más sobre cómo puedes usar estas nuevas APIs en tus propios proyectos.

Logging rediseñado

La CLI de Astro recibió una capa de pintura fresca en el lanzamiento 4.0 con una experiencia de logging rediseñada. Los aspectos destacados incluyen:

• Eliminación de logging innecesario: Anteriormente, algunos escenarios comunes resultaban en doble logging y otros logs innecesarios.
• Errores más concisos: Los errores ahora ocupan menos líneas en la terminal, lo que significa menos desplazamiento en terminales más pequeñas cuando algo sale mal.
• Stack traces refinados: Los errores ya no incluyen internals inútiles del runtime de Vite en cada stack trace, por defecto.

El resultado es que los comandos dev y build de Astro son aún más fáciles de leer, analizar y depurar en el nuevo Astro 4.0.

Documentación rediseñada

Starlight es la plantilla de documentación oficial para Astro. Incluye todas las mejores prácticas y patrones que hemos recopilado durante los últimos dos años construyendo y gestionando el sitio de docs de Astro a escala.

Hoy, hemos cerrado el círculo: docs.astro.build ahora está impulsado por Starlight.

Ahora que nosotros mismos hemos hecho el cambio a Starlight, cualquier mejora que hagamos a nuestro propio sitio de documentación retroalimentará para mejorar Starlight para todos. Gracias a la documentación de Astro, Starlight ahora tiene características como Expressive Code y un nuevo plugin de Algolia. Y habrá nuevos componentes por venir, como nuestro árbol de archivos interactivo y quiz de opción múltiple.

Queremos reconocer la significativa contribución y liderazgo del mantenedor core de Astro @TheOtterlord para completar esta actualización. Visita el nuevo sitio de documentación en docs.astro.build. Explora el código o únete a nosotros en Discord si quieres saber más.

Empieza con Astro 4.0

Astro 4.0 ya está disponible en npm. Visita https://astro.new/ para probar Astro en tu navegador, o ejecuta el siguiente comando en tu terminal para empezar con un nuevo proyecto:

# Create a new Astro 4.0 project:
npm create astro@latest

¿Actualizando un proyecto existente a Astro 4.0? Consulta la Guía de Actualización v4.0 para obtener todos los detalles y la guía de actualización individual para cada cambio.