Astro 3.5: Enrutamiento i18n

Por
Erika
Emanuele Stoppa
Matthew Phillips
Nate Moore
Bjorn Lu

Astro 3.5 ya está disponible hoy e incluye nuevo enrutamiento i18n, optimización de prefetch, y más. ¡Este puede ser uno de los lanzamientos menores más grandes en la historia de Astro!

Los aspectos destacados del lanzamiento incluyen:

Para aprovechar las últimas características, asegúrate de estar ejecutando la última versión de Astro. Puedes actualizar a Astro 3.5 ejecutando el comando de actualización para tu gestor de paquetes preferido:

npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

Enrutamiento i18n (experimental)

Ahora es más fácil que nunca construir apps multilingües con Astro.

La API experimental de enrutamiento i18n de Astro te permite añadir tu contenido multilingüe con soporte para configurar un idioma por defecto, calcular URLs relativas de páginas, y aceptar los idiomas preferidos proporcionados por el navegador de tu visitante. También puedes especificar idiomas fallback por idioma para que tus visitantes siempre sean dirigidos a contenido existente en tu sitio.

Habilita la opción de enrutamiento experimental añadiendo un objeto i18n a tu configuración de Astro con una ubicación por defecto y una lista de todos los idiomas a soportar:

astro.config.mjs
import {defineConfig} from "astro/config";


export default defineConfig({
  experimental: {
    i18n: {
      defaultLocale: "en",
      locales: ["en", "es", "pt-br"]
    }
  }
})

Organiza tus carpetas de contenido por idioma según tu i18n.routingStrategy, y Astro se encargará de generar tus rutas y mostrar tus URLs preferidas a tus visitantes.

├── src
│   ├── pages
│   │   ├── about.astro
│   │   ├── index.astro
│   │   ├── es
│   │   │   ├── about.astro
│   │   │   ├── index.astro
│   │   ├── pt-br
│   │   │   ├── about.astro
│   │   │   ├── index.astro

Calcula URLs relativas para tus enlaces con getLocaleRelativeURL del nuevo módulo astro:i18n:

---
import {getRelativeLocaleUrl} from "astro:i18n";
const aboutUrl = getRelativeLocaleUrl("pt-br", "about");
---
<p>Learn more <a href={aboutUrl}>About</a> this site!</p>

Habilitar el enrutamiento i18n también proporciona dos nuevas propiedades para la detección de idioma del navegador: Astro.preferredLocale y Astro.preferredLocaleList. Estas combinan el header Accept-Language del navegador y la lista de idiomas soportados de tu sitio, y pueden usarse para respetar automáticamente los idiomas preferidos de tus visitantes.

Lee más sobre el enrutamiento i18n experimental de Astro en nuestra documentación.

Prefetch

Prefetch es una característica del navegador para obtener páginas por adelantado para tus visitantes de modo que estén parcialmente cargadas incluso antes de la navegación. Para apps multi-página, prefetch es una parte importante para mantener tu sitio rápido.

Prefetch en Astro estaba disponible anteriormente a través de una integración oficial (@astrojs/prefetch). Hoy estamos trayendo prefetch al core como una característica opt-in, y ampliando lo que puede hacer.

Puedes habilitar el prefetch configurando prefetch:true en tu configuración de Astro:

astro.config.js
import { defineConfig } from 'astro/config';


export default defineConfig({
  prefetch: true
})

Además de ser ahora una característica del core, el nuevo prefetch también viene con más flexibilidad:

  • Configura si el prefetch ocurre al tap (un toque que no es un clic completo), al hover, o al entrar en el viewport.
  • Define qué estrategia se usa por enlace usando el atributo data-astro-prefetch.
  • Activa el prefetch en todos los enlaces por defecto (el comportamiento existente al usar <ViewTransitions />).
  • Ignorar eventos de hover y scroll que ocurren rápidamente, para prevenir la sobrecarga de contenido que tu visitante probablemente no vaya a visitar.

Prefetch está habilitado por defecto al usar View Transitions y la nueva implementación ahora hace posible desactivar el prefetch por enlace:

<a href="/logout" data-astro-prefetch="false">Logout</a>

Visita la guía de Prefetch para más información.

Caché de Compilación de Content Collections (experimental)

Los sitios estáticos grandes que usan intensivamente Content Collections pueden probar el nuevo caché de compilación experimental.

Esto incluye múltiples refactorizaciones del proceso de compilación de Astro para optimizar cómo se manejan las Content Collections, lo que debería proporcionar mejoras significativas de rendimiento para usuarios con muchas colecciones.

Los usuarios que construyen un sitio static pueden optar por previsualizar el nuevo caché de compilación añadiendo la siguiente bandera a tu configuración de Astro:

astro.config.mjs
import { defineConfig } from 'astro/config';


export default defineConfig({
  experimental: {
    contentCollectionCache: true,
  },
})

Cuando esta característica experimental está habilitada, los archivos generados de tus content collections se almacenarán en el cacheDir (por defecto, node_modules/.astro) y se reutilizarán entre compilaciones. La mayoría de los entornos de CI restauran automáticamente los archivos en node_modules/ por defecto.

En nuestras pruebas internas con el proyecto real Astro Docs, esta característica reduce el paso de bundling de astro build de 133.20s a 10.46s, aproximadamente 92% más rápido. El proceso completo de astro build solía tomar 4mins 58s y ahora toma poco más de 60s para una reducción total del 80%.

Si encuentras algún problema con esta característica experimental, ¡por favor avísanos!

Siempre puedes omitir el caché para una única compilación pasando la bandera --force a astro build.

astro build --force

Soporte de formularios en View Transitions

El router <ViewTransitions /> ahora puede manejar envíos de formularios, permitiendo las mismas transiciones animadas y retención de UI con estado en envíos de formularios que ya están disponibles en enlaces <a>. Con esta adición, tu proyecto de Astro puede tener animaciones en todos estos escenarios:

  • Hacer clic en enlaces entre páginas.
  • Hacer cambios con estado en formularios (ej. actualizar preferencias del sitio).
  • Disparar navegación manualmente a través de la API navigate().

Esta característica es actualmente opt-in, pero estará habilitada por defecto a partir de Astro 4.0. Para habilitarla, añade la prop handleForms al componente <ViewTransitions /> en tu página:

src/layouts/MainLayout.astro
---
import { ViewTransitions } from 'astro:transitions';
---


<html>
  <head>
    <!-- ... -->
    <ViewTransitions handleForms />
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Al igual que con los enlaces, si no quieres que el enrutamiento maneje un envío de formulario, puedes desactivarlo por formulario con la propiedad data-astro-reload:

src/components/Contact.astro
<form class="contact-form" action="/request" method="post" data-astro-reload>
  <!-- ...-->
</form>

El soporte de formularios funciona en formularios post method="get" y method="post".

Mejoras en optimización de imágenes

Los assets de Astro han continuado mejorando y en 3.5 ahora tenemos:

  • Las imágenes originales que no se usan fuera del pipeline de optimización se eliminan de la compilación final. Para usuarios con un gran número de estas imágenes (ej. miniaturas), esto debería reducir el consumo de almacenamiento y los tiempos de despliegue.
  • Se ha añadido una nueva propiedad, propertiesToHash, para permitir especificar qué propiedades de getImage() / <Image /> / <Picture /> deben usarse para hashear los archivos resultantes al hacer transformaciones locales. Para la mayoría de los servicios, esto incluirá propiedades como src, width, o quality que cambian directamente el contenido de la imagen generada.
  • El componente <Picture /> ahora usará jpg y jpeg respectivamente como formatos fallback cuando la imagen original esté en esos formatos.

Hooks de Integración para añadir Middleware

Ahora es posible en Astro que una integración añada middleware en nombre del usuario. Anteriormente, cuando un tercero quería proporcionar middleware, el usuario necesitaba crear un archivo src/middleware.ts por sí mismo. Ahora, añadir middleware de terceros es tan fácil como añadir una nueva integración.

Para los autores de integraciones, hay una nueva función addMiddleware en el hook astro:config:setup. Esta función te permite especificar un módulo de middleware y el orden en el que debe aplicarse:

my-package/middleware.js
import { defineMiddleware } from 'astro:middleware';


export const onRequest = defineMiddleware(async (context, next) => {
  const response = await next();


  if(response.headers.get('content-type') === 'text/html') {
    let html = await response.text();
    html = minify(html);
    return new Response(html, {
      status: response.status,
      headers: response.headers
    });
  }


  return response;
});

Ahora puedes añadir el middleware de tu integración y especificar que se ejecute antes o después del middleware propio definido por la aplicación (definido en src/middleware.{js,ts})

my-package/integration.js
export function myIntegration() {
  return {
    name: 'my-integration',
    hooks: {
      'astro:config:setup': ({ addMiddleware }) => {
        addMiddleware({
          entrypoint: 'my-package/middleware',
          order: 'pre'
        });
      }
    }
  };
}

Múltiples temas de código (experimental)

Astro recientemente actualizó para usar la librería shikiji para el resaltado de sintaxis, y ahora hemos añadido la capacidad de soportar múltiples temas a través de una nueva opción markdown.shikiConfig.experimentalThemes.

Esto te permite definir más fácilmente un tema de modo claro y oscuro para bloques de código con resaltado de sintaxis. Puedes usarlo así:

astro.config.mjs
import { defineConfig } from 'astro/config';


export default defineConfig({
  markdown: {
    shikiConfig: {
      experimentalThemes: {
        light: 'github-light',
        dark: 'github-dark'
      }
    }
  }
});

Integración de Qwik

Desde nuestra comunidad, ¡ahora hay una integración de Astro para usar Qwik con Astro! Puedes instalar la integración de Qwik ejecutando:

npx astro add @qwikdev/astro

O puedes instalar la integración tú mismo, y actualizar tu configuración:

astro.config.mjs
import { defineConfig } from 'astro/config';
import qwikdev from '@qwikdev/astro';


export default defineConfig({
  integrations: [qwikdev()],
});

Consulta el artículo del blog para saber más sobre la nueva integración y si encuentras algún problema visita el repositorio de la integración.

Corrección de Bugs

Se incluyen correcciones de bugs adicionales en este lanzamiento. Consulta las notas del lanzamiento para saber más.