Astro 2.5

Por
Matthew Phillips
Ben Holmes
Erika
Bjorn Lu

Acabamos de lanzar Astro 2.5, con una gran lista de características incluyendo:

Colecciones de datos y referencias

Las content collections son la solución de primera clase de Astro para gestionar y crear contenido. Astro 2.5 lleva esa historia aún más lejos con nuevos formatos de datos y referencias de colecciones.

Primero, hemos introducido una nueva propiedad type: 'data' para almacenar formatos de datos como JSON y YAML en sus propias colecciones. Esto desbloquea el uso de colecciones para nuevas formas de contenido incluyendo perfiles de autores, texto alternativo de imágenes reutilizable, diccionarios de traducción, y más.

Crea colecciones de datos junto a tus colecciones de contenido existentes:

src/content/
    blog/
        week-1.md
        week-2.md
    authors/
        grace-hopper.json
        alan-turing.json

Configúralas usando la nueva propiedad type: 'data':

src/content/config.ts
import { defineCollection, z } from "astro:content"


const authors = defineCollection({
  type: "data",
  schema: z.object({
    name: z.string(),
    socialLink: z.string().url(),
  }),
})


const blog = defineCollection({
  type: "content",
  schema: z.object({
    /* ... */
  }),
})


export const collections = { blog: blog, authors: authors }

También puedes querer “referenciar” entradas relacionadas. Un ejemplo común es un blog post que referencie perfiles de autores reutilizables almacenados como JSON en una colección de datos, o URLs de posts relacionados almacenados en la misma colección. Puedes configurar estas relaciones usando la nueva función reference():

import { defineCollection, reference, z } from "astro:content"


const blog = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    // Reference a single author from the `authors` collection by `id`
    author: reference("authors"),
    // Reference an array of related posts from the `blog` collection by `slug`
    relatedPosts: z.array(reference("blog")),
  }),
})


const authors = defineCollection({
  type: "data",
  schema: z.object({
    /** ... */
  }),
})


export const collections = { blog, authors }

Ahora, cada blog post puede referenciar entradas relacionadas con validación de tipos:

src/content/blog/welcome.md
---
title: "Welcome to my blog"
author: ben-holmes # references `src/content/authors/ben-holmes.json`
relatedPosts:
  - about-me # references `src/content/blog/about-me.md`
  - my-year-in-review # references `src/content/blog/my-year-in-review.md`
---

Consulta la guía actualizada de content collections para ejemplos en profundidad.

Renderizado híbrido estático por defecto (experimental)

En 2.0 añadimos la capacidad de pre-renderizar páginas individuales en apps SSR. Ahora en 2.5 también puedes hacer lo opuesto; en un sitio mayormente estático puedes especificar algunas rutas para que no sean pre-renderizadas.

Esta nueva opción de salida de servidor 'híbrido' invierte el comportamiento de pre-renderizado por defecto de SSR para que ya no tengas que marcar cada una de las rutas estáticas que quieres pre-renderizar. Esta opción será marcada como experimental por un corto período de tiempo mientras estabilizamos casos límite. Puedes usarla hoy habilitando el flag hybridOutput en la sección experimental de tu configuración y añadiendo un adaptador:

astro.config.mjs

import { defineConfig } from "astro/config"
import nodejs from "@astrojs/node"


export default defineConfig({
  output: "hybrid",
  adapter: nodejs(),
  experimental: {
    hybridOutput: true,
  },
})

Una vez que hayas hecho eso, todo tu sitio será pre-renderizado por defecto. Puedes optar por no pre-renderizar estableciendo el export prerender de cualquier página o endpoint a false:

src/pages/contact.astro

---
export const prerender = false


if (Astro.request.method === "POST") {
  // handle form submission
}
---


<form method="POST">
  <input type="text" name="name" />
  <input type="email" name="email" />
  <button type="submit">Submit</button>
</form>

Directivas de cliente personalizadas (experimental)

Las directivas de cliente personalizadas permiten a los autores de integraciones definir nuevas directivas client: para ganar mayor control sobre cuándo se cargan los componentes.

Las integraciones pueden añadir estas a través del hook astro:config:setup y su nueva API addClientDirective(). Para usar esta API, habilita customClientDirectives en la sección experimental de tu configuración.

astro.config.mjs

import { defineConfig } from "astro/config"
import onClickDirective from "astro-click-directive"


export default defineConfig({
  integrations: [onClickDirective()],
  experimental: {
    customClientDirectives: true,
  },
})

astro-click-directive

export default function onClickDirective() {
  return {
    hooks: {
      "astro:config:setup": ({ addClientDirective }) => {
        addClientDirective({
          name: "click",
          entrypoint: "astro-click-directive/click.js",
        })
      },
    },
  }
}

Ahora puedes usar client:click en cualquiera de tus componentes de framework con soporte completo de tipos.

<Counter client:click />

Consulta la documentación de directivas de cliente para aprender cómo construir este tipo de integraciones.

Minificación de HTML

Ahora puedes optar por la minificación del HTML producido por tus componentes de Astro.

Usando la opción compressHTML, Astro eliminará todos los espacios en blanco de tu HTML incluyendo saltos de línea.

Queríamos habilitar la minificación sin sacrificar rendimiento. Para apps renderizadas en el servidor, hacer minificación en cada render podía ser costoso. Con compressHTML tus componentes se comprimen solo una vez por el compilador de Astro, y luego durante el build.

Puedes habilitar esto en tu configuración:

import { defineConfig } from "astro/config"
export default defineConfig({
  compressHTML: true,
})

Nota: la compresión ocurre tanto en modo de desarrollo como en el build final.

Aunque esta opción no comprimirá el HTML producido por componentes de framework, puedes escribir un middleware para comprimir las respuestas HTML.

Renderizado paralelizado

Astro ahora renderizará componentes en paralelo para que los componentes que cargan datos más arriba en el árbol ya no bloqueen a otros componentes que también están cargando datos, como en el ejemplo siguiente:

<Delayed ms={30} />
<Delayed ms={20} />
<Delayed ms={40} />
<Delayed ms={10} />

Este componente <Delayed /> espera un número de milisegundos. Anteriormente, cada componente necesitaba esperar a que el anterior terminara antes de empezar a renderizar. En 2.5 estos ahora se renderizarán todos al mismo tiempo.

Dato curioso: intentamos añadir esta optimización en el pasado pero nos faltaban buenos benchmarks para asegurar que esto no ralentizara el renderizado. Mejoras recientes en nuestra infraestructura de benchmarking CI ahora nos han permitido implementar esto con confianza.

Helper de tipo polimórfico

Astro ahora incluye un helper de TypeScript (Polymorphic) para facilitar la construcción de componentes que pueden renderizar como diferentes elementos HTML con completa seguridad de tipos. Esto es útil para componentes como <Link> que pueden renderizar como <a> o <button> dependiendo de las props que se le pasen.

El ejemplo siguiente implementa un componente polimórfico completamente tipado que puede renderizar como cualquier elemento HTML. El tipo HTMLTag se usa para asegurar que la prop as sea un elemento HTML válido.

---
import { HTMLTag, Polymorphic } from "astro/types"


type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }>


const { as: Tag, ...props } = Astro.props
---


<Tag {...props} />

Más

Correcciones de bugs y mejoras adicionales están incluidas en este lanzamiento. Revisa las notas del lanzamiento para aprender más.