Hace un poco más de un mes, la primera beta pública de Astro fue lanzada al mundo. Desde entonces, hemos estado corrigiendo bugs y recopilando tus comentarios sobre qué abordar a continuación. Hoy, estamos emocionados de anunciar el lanzamiento de algunas de nuestras características más solicitadas.
Nos emociona presentar Astrœo v0.18, que incluye:
- Hidratación parcial responsiva: Hidrata componentes con media queries de CSS.
- Slots con nombre: Soporta múltiples puntos de entrada de contenido dentro de componentes de Astro.
- Soporte para Solid.js: Usa componentes de Solid.js en Astro.
- Soporte para Lit: Usa Lit SSR para obtener renderizado del lado del servidor para web components.
<style global>soporte, resaltado de sintaxis en GitHub y un nuevo y brillante sitio de docs.
Hidratación parcial responsiva
Los sitios web responsivos a menudo cargan componentes que solo son visibles en ciertos tamaños de dispositivo, como un menú lateral para móvil. Como desarrollador, puede ser difícil (¿imposible?) evitar cargar código exclusivo para móvil en dispositivos que no son móviles. El resultado es tiempo desperdiciado en código que el usuario final nunca verá.
Astro resuelve el problema del JavaScript innecesario con hidratación parcial, una técnica que consiste en hidratar únicamente los componentes que necesitan interactividad y dejar el resto como HTML estático. Astro v0.18 añade una nueva forma de personalizar la hidratación parcial usando media queries de CSS que evitan enviar código a dispositivos que no lo necesitan.
Añade la directiva client:media a un componente y solo se hidratará cuando se cumpla la condición de media. ¿Estás en un teléfono móvil? Omite cualquier JavaScript costoso e innecesario para el encabezado de escritorio que nunca verás. ¿Estás en un equipo de escritorio o portátil? No cargues ese menú hamburguesa para móvil. Todo esto forma parte del compromiso de Astro de minimizar el JavaScript innecesario que envías a tus usuarios.
Slots con nombre en componentes de Astro
Los slots con nombre son una característica web estándar utilizada en APIs del navegador y frameworks web como Vue. En este lanzamiento, Astro añade soporte para slots con nombre en componentes, páginas y layouts de Astro.
Los slots con nombre son particularmente útiles para layouts de página. Un layout ahora puede especificar slots para diferentes secciones de la página. Puedes poner etiquetas de metadata en el slot “head”, y el contenido de la página en el slot “body” o “content”. Tu layout es ahora completamente personalizable, con tantos o tan pocos slots como necesites.
Soporte para Solid
Solid es un framework de UI basado en JSX que se describe a sí mismo como la alternativa familiar, moderna y más reactiva a React. Estamos muy emocionados con Solid, y con el nuevo renderer de Solid para Astro puedes usar Solid como un framework de primera clase en tu proyecto.
Añadir soporte para Solid (nuestro tercer framework JSX oficialmente soportado) no fue fácil, y requirió una gran refactorización de cómo Astro maneja JSX. El resultado final valió la pena: Astro ahora es mucho mejor soportando diferentes tipos de JSX e incluso puede soportar la nueva transformación JSX de React v17. Esta nueva base para Astro debería sostenernos bien en el futuro.
El lanzamiento de Solid v1.0 es la demostración perfecta de la promesa multi-framework de Astro: prueba tu primer componente Solid en un proyecto existente junto con el resto de tus componentes. Mientras que otras herramientas de build te obligan a elegir un solo framework y quedarte con él, Astro hace que los proyectos multi-framework sean fáciles para migraciones de código a corto plazo o arquitecturas de sitio a largo plazo.
Soporte para Lit SSR
El renderizado del lado del servidor (SSR) para web components finalmente está aquí, gracias a Lit y al nuevo renderer de Lit para Astro.
Gracias al Declarative Shadow DOM – una nueva característica de HTML que ya está disponible en Chrome – el proyecto Lit pudo lanzar soporte experimental de SSR para Lit. Define un custom element en JavaScript y renderízalo en el servidor con Astro como harías con cualquier otro componente de React o Vue. A diferencia de otros componentes JS, sigues usando el nombre de la etiqueta del custom element en tu HTML.
El renderer de Lit SSR es experimental, y algunos web components existentes podrían no funcionar con la nueva API. A medida que otras bibliotecas de web components adopten el shadow DOM declarativo y surjan APIs comunes para el renderizado, esperamos llevar soporte también a esas bibliotecas. Seguiremos refinando y mejorando este soporte a medida que nos acercamos a Astro v1.0.
Comunidad
Hemos quedado absolutamente asombrados con el amor que Astro ha recibido en tan poco tiempo:
- Artículos y guías destacados de Netlify, Cloudflare, CSS Tricks, y más.
- Más de 2,000 desarrolladores han descargado la extensión de VSCode para Astro
- Más de 500 visitantes semanales a nuestro increíble Discord
- Más de 300 proyectos públicos usando Astro en GitHub
- ¡2 (DOS!) ofertas de trabajo en Astro ya publicadas en Discord!
- GitHub añade soporte para resaltado de sintaxis de componentes de Astro
Para aprender más sobre Astro y empezar a construir tu primer sitio, consulta la guía de Getting Started.