Astro 3.0

Por
Matthew Phillips
Erika
Emanuele Stoppa
Bjorn Lu
Nate Moore

Introducing Astro 3.0!

Astro 3.0 es el primer framework web importante en soportar la View Transitions API. Desvanece, desliza, transforma e incluso persiste elementos con estado a través de la navegación entre páginas con facilidad. Hasta hace poco, esto solo había sido posible dentro de aplicaciones de página única (SPAs) de JavaScript. Pero gracias a los avances en la plataforma web, estas características ahora están disponibles para todos en Astro 3.0.

Otros aspectos destacados del lanzamiento incluyen:

  • Optimización de Imágenes (estable): Sin bandera y mejor que nunca.
  • Rendimiento de Renderizado Más Rápido: Los componentes de Astro se renderizan 30-75% más rápido.
  • Mejoras de SSR para Serverless: Nuevas formas de conectar con tu plataforma de hosting.
  • Mejoras de HMR para JSX: Soporte de Fast Refresh para React y Preact.
  • Salida de Compilación Optimizada: HTML más limpio y con mejor rendimiento.

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

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

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

View Transitions de Astro

View Transitions son un conjunto de nuevas APIs de plataforma que desbloquean efectos de transición nativos del navegador entre páginas. Históricamente esto solo había sido posible en aplicaciones de página única (SPAs), pero los navegadores web y los autores de especificaciones han estado trabajando duro durante los últimos años para traer transiciones de página nativas a la plataforma, y Astro 3.0 es el primer framework web en llevarlas al mainstream.

Con View Transitions de Astro, puedes:

  • Transforma elementos persistentes de una página a otra
  • Desvanece contenido dentro y fuera de la página, para un efecto de navegación menos brusco
  • Desliza contenido dentro y fuera de la página, para un poco más de personalidad
  • Persiste UI común entre páginas, con o sin recarga

Lo mejor de View Transitions en Astro es lo simples que son de usar. Con solo 2 líneas de código, puedes añadir una animación de desvanecimiento sutil — ¡y de buen gusto! — a tu sitio. Para probarlo tú mismo, importa el componente ViewTransitions y añádelo dentro del elemento <head> de cualquier página:

src/pages/index.astro
---
// Note: Make sure you add the "<ViewTransitions />" component
// to other pages as well, and not just one.
import {ViewTransitions} from 'astro:transitions';
---
<head>
  <title>My View Transition Demo</title>
  <ViewTransitions />
</head>
<body>
  <!-- -->
</body>

Los usuarios de Astro han tenido acceso temprano a View Transitions desde Astro 2.9. Nuestra comunidad ha estado experimentando desde entonces, proporcionando feedback temprano que ayudó a dar forma a la API final que ves hoy. Aquí hay algunas de nuestras demos favoritas de la comunidad, para darte una idea de lo que ahora es posible:

Mira a Joe Bell demostrar la nueva característica de View Transitions.

Próximamente: transiciones de página sin JavaScript

Prueba esta demo en vivo de Maxi Ferreira.

Cada demo parece una aplicación nativa del lado del cliente. Pero no lo son. Todo es HTML renderizado en el servidor, cobrando vida con Astro 3.0 y la nueva View Transitions API.

Hemos puesto mucho esfuerzo en hacer que View Transitions funcione genial en todos los navegadores, incluso aquellos que aún no soportan las APIs nativas de View Transition. Astro 3.0 incluye fallbacks para la mayoría de los navegadores, en forma de un pequeño script de ~3kb que Astro añade a tu página automáticamente.

Aprende más sobre View Transitions en nuestra práctica guía de View Transitions, o este excelente artículo sobre las APIs del navegador del equipo de Chrome. También lee más sobre nuestro camino para adoptar View Transitions en el blog de Chrome Developer.

Rendimiento de Renderizado Más Rápido

El rendimiento de renderizado vio una gran mejora en Astro 3.0, con la mayoría de los componentes renderizándose 30% más rápido (vs. Astro 2.9). En benchmarks complejos, la mejora de velocidad puede ser de hasta un 75%.

Lograr este tipo de aceleración fue el resultado de un esfuerzo de refactorización dedicado que comenzó en Astro 2.10 y se extendió hasta Astro 3.0. Eliminamos la mayor cantidad posible de código innecesario de las rutas críticas en nuestro pipeline de compilación y optimizamos lo que quedó. Generadores innecesarios y código asíncrono fueron dos de los mayores culpables. ¡Cada milisegundo cuenta!

Optimización de Imágenes (estable)

La optimización de imágenes ya es estable en Astro 3.0 y está disponible en todos los proyectos.

Puedes importar imágenes desde tu código y colocarlas en la página con el nuevo componente integrado <Image>. Astro se encarga del resto: el pipeline de compilación detectará y optimizará automáticamente cada imagen por ti. La etiqueta de imagen renderizada final tendrá un ancho y alto inferidos añadidos por ti, para prevenir el desplazamiento de diseño con protección automática de Cumulative Layout Shift (CLS).

---
// Import the <Image /> component
import { Image } from "astro:assets"
// Import a reference to the image itself
import myImage from "../assets/penguin.png"
---


<Image src={myImage} alt="A very cool penguin!" />

La última vez que escribimos sobre optimización de imágenes fue en junio. Desde entonces, hemos implementado varias mejoras importantes incluyendo:

  • Soporte completo para el servicio de imágenes integrado de Vercel. Añade imageService: true a la configuración de tu integración de Vercel para ver tus imágenes de producción optimizadas a través de su CDN global.
  • Migración a Sharp como nuestra nueva librería de optimización por defecto. Sharp reemplaza nuestro anterior @squoosh/lib que ya no se mantiene.
  • Soporte para optimizar imágenes remotas. Los equipos de contenido pueden continuar gestionando sus imágenes usando sus flujos de trabajo existentes y herramientas CMS.

Aprende más sobre la Optimización de Imágenes en nuestra nueva guía de Imágenes.

Mejoras de SSR para Serverless

El lunes anunciamos una nueva asociación de hosting oficial con Vercel. La colaboración con Vercel nos permitió hacer mejoras significativas en nuestra historia de SSR en Astro 3.0. Estas nuevas características benefician a todos los usuarios, independientemente de dónde elijan alojar su sitio web:

  • División de Código por Ruta - Crea archivos de servidor más pequeños e individuales para cada ruta en tu sitio web. Los usuarios de Serverless (Vercel, Netlify, Cloudflare, etc.) ahora pueden ver un rendimiento mejorado al reducir la carga de código no utilizado en cada petición.
  • Middleware de Edge - Astro ahora puede agrupar tu middleware para despliegue en el edge. El middleware de edge se distribuye globalmente y se ejecuta en servidores que están lo más cerca posible de tus usuarios.
  • Personalización de Host: Como no hay dos proveedores de hosting iguales, hemos añadido una API a Astro que ayuda a los usuarios a entender mejor estas diferencias. Los adaptadores de hosting (como @astrojs/node y @astrojs/vercel) ahora pueden decirle a Astro qué características soportan. Astro puede usar esta información para mostrar advertencias más útiles e informativas durante el desarrollo y prevenir errores inesperados en producción.

Estas características están todas disponibles hoy en Vercel, pero cualquier adaptador de hosting puede actualizarse para añadir soporte. En los próximos meses, trabajaremos con los mantenedores de nuestra comunidad para ayudar a llevar estas características a cualquier plataforma de hosting que pueda soportarlas.

Mejoras de HMR para JSX

React Fast Refresh ahora funciona en Astro 3.0 gracias a una gran refactorización de nuestro soporte interno de compilación JSX. Los usuarios de React, Preact y Solid.js deberían ver una mejora significativa en Hot Module Reloading (HMR) y la estabilidad general del servidor de desarrollo en Astro 3.0.

Fast Refresh es una característica de desarrollo moderna donde los cambios locales se envían inteligentemente al navegador sin una recarga de página. Lo que hace único a Fast Refresh (vs. HMR regular) es que estas actualizaciones se envían al navegador sin cambiar el estado actual de la UI.

En la demo de abajo, presta atención a cómo la página nunca se recarga y el contador nunca se reinicia a cero, a pesar de que el desarrollador actualiza la plantilla misma. Eso es Fast Refresh.

Un editor de código lado a lado con una ventana que muestra un componente de React con un temporizador en ejecución. Cuando el editor de código guarda un cambio, la página actualiza solo los elementos cambiados, lo que significa que el temporizador puede seguir ejecutándose sin interrupciones.

Si alguna vez has construido un modal o alguna otra UI de múltiples pasos, entonces probablemente has experimentado la frustración común de ver el estado de tu página recargarse y reiniciarse después de cada cambio. Fast Refresh resuelve este problema, acelerando tu flujo de trabajo de desarrollo.

Salida de Compilación Optimizada

Hemos hecho varias mejoras a la salida de compilación general en 3.0, incluyendo:

  • Minificación de HTML: Astro 3.0 ahora minificará automáticamente toda la salida HTML. El HTML minificado resulta en una carga útil más pequeña a través de la red y un tiempo de respuesta general más rápido.
  • IDs de Componente: Esos ruidosos nombres de clase astro-XXXXXX han sido reemplazados con un nuevo atributo HTML dedicado data-astro-cid-hash. Este cambio deja tus atributos class="" más legibles, con una salida HTML más organizada en general.
  • Incrustación de CSS: Astro 3.0 ahora incrustará automáticamente pequeños fragmentos de CSS en tu HTML. Esto mejora el rendimiento de carga de la página frente a versiones anteriores de Astro donde una página podría cargar muchos archivos CSS más pequeños como peticiones separadas desde el navegador.

Prueba Astro 3.0 Hoy

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

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

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