5 nuevas características para probar en Astro 2.5

AstroJS es una fantástica herramienta basada en JavaScript que se utiliza para crear sitios web estáticos superrápidos. Le permite crear sitios web utilizando múltiples marcos de JavaScript como React, Vue y Svelte. Astro 2.5 trae un conjunto completamente nuevo de funciones, algunas de las cuales se tratarán aquí.

1. Colecciones de datos

Astro 2.5 ahora admite el almacenamiento de JSON y YAML en colecciones. La nueva propiedad type: ‘data’ habilita esta funcionalidad. Para demostrar esto, cree una colección de datos de ‘escritores’ en la carpeta src/content, donde JSON o YAML Se pueden agregar archivos.

Luego, configure las colecciones en src/content/config.ts usando el defineCollection y z utilidades de astro:contenido module y configurando el tipo en data.

 import { z, defineCollection } from "astro:content";
const writers = defineCollection({
  type: "data",
  schema: z.object({ name: z.string() }),
});
 

Finalmente, exporte el objeto de la colección para registrar sus colecciones.

 export const collections = {writers:writers}
 

2. Minificación de HTML

Astro 2.5 presenta la opción compressHTML que elimina todos los espacios en blanco (y saltos de línea) de su HTML. El compilador de Astro comprime los componentes solo una vez y luego durante la compilación. Esto se hace para reducir los costos de rendimiento.

Habilitar esta opción en su proyecto es fácil. Simplemente agregue las siguientes líneas a su archivo de configuración. La minimización de HTML solo funciona con componentes escritos en formato de archivo .astro.

 export default defineConfig({compressHTML:true})
 

3. Representación en paralelo

La representación de componentes en paralelo es una característica largamente esperada en Astro. En los casos en que los componentes secundarios en diferentes subárboles obtienen datos, Astro 2.5 mejora los tiempos de carga al obtener datos en paralelo.

Esto permite que un componente más abajo en el árbol se represente sin ser bloqueado por un componente de obtención de datos más arriba en el árbol. Por el momento, el renderizado paralelo no funciona correctamente con matriz.mapa fragmentos asincrónicos.

Astro 2.5 también trae un conjunto completamente nuevo de características experimentales que se describen a continuación.

4. Representación híbrida

Astro 2.5 ahora le permite definir una nueva opción de salida del servidor en su archivo de configuración que anula el comportamiento predeterminado de prerenderizado de SSR.

Para aprovechar el renderizado híbrido, configure salida híbrida a verdadero en la sección experimental de su configuración y agregue un adaptador.

Al hacer esto, todo el sitio se renderizará previamente de forma predeterminada, pero puede optar por no participar en este comportamiento configurando el preprocesar exportación de cualquier ruta o página a false:

 export const prerender = false; 

5. Directivas personalizadas de clientes

Astro 2.5 presenta la API addClientDirective para el control personalizado de hidratación de componentes del lado del cliente mediante cliente:* directivas.

Para usar esta característica, habilite experimental.customClientDirectives en el archivo de configuración y mantenga los puntos de entrada de directivas al mínimo para evitar cualquier impacto negativo en la hidratación de los componentes.

Una función de tipo ClientDirective debe exportarse desde el archivo de directivas de su cliente. Por ejemplo, el siguiente código hidrata el componente en el primer clic en la ventana.

 import { ClientDirective } from "astro";
const clickDirective: ClientDirective = (load, opts, el) => {
  window.addEventListener(
    "click",
    async () => {
      const hydrate = await load();
      await hydrate();
    },
    { once: true }
  );
};
export default clickDirective;
 

Ahora cliente: clic se puede utilizar en sus componentes con soporte de tipo completo.

Cómo instalar Astro

Astro proporciona una interfaz de línea de comandos (CLI) llamada crear astro para empezar Debe tener NodeJS 16+ y npm instalados en su máquina.

 npm create astro@latest 

Esto creará un andamiaje para un nuevo proyecto Astro desde cero. Siga las instrucciones en pantalla para configurar las cosas (si no está seguro de qué elegir, siga las opciones recomendadas). Próximo, cd en la carpeta del proyecto, luego ejecute:

 npm run dev
 

Puede agregar marcos como React, usando añadir astro. Si todo está instalado correctamente, puede abrir anfitrión local: 3000 en su máquina, y debería ver un mensaje de «Bienvenido a Astro».

Si no le gusta NPM, puede optar por otros administradores de paquetes de JavaScript como Yarn y PNPM.

Mejorando la experiencia del desarrollador con Astro

Los marcos todo en uno como Astro hacen que el desarrollo de sitios web rápidos sea lo más fluido posible. Es fantástico, la naturaleza independiente de la interfaz de usuario significa que puede trabajar con cualquier marco de JavaScript popular de su elección sin problemas.