Astro 0.19

Por
Fred Schott

Nos emociona presentar Astro 0.19, que incluye:

Enrutamiento basado en archivos, inspirado en Next.js

Astro siempre ha soportado enrutamiento básico basado en archivos, donde cada archivo en tu directorio pages/ se convierte en una nueva página en esa misma URL. Astro 0.19 da un paso más allá con soporte para parámetros de URL dinámicos en el nombre de archivo.

Inspirado por Next.js y SvelteKit, ahora puedes añadir corchetes al nombre de archivo de tu página (ej: src/pages/[slug].astro) para crear una página dinámica que coincide con muchas URLs diferentes. También se soporta la sintaxis catch-all [...slug].astro.

Con esta nueva característica puedes añadir soporte para parámetros de URL, slugs, URLs amigables, paginación y más a tu sitio web.

Para crear una ruta dinámica, crea un archivo en tu directorio pages como pages/posts/[slug].astro. Crea una función getStaticPaths() en el script frontmatter de tu página y dile a Astro exactamente qué rutas construir para esa ruta:

src/pages/posts/[slug].astro
---
// Tell Astro what pages to build for your route "/pages/:slug"
export async function getStaticPaths() {
  return [
    // Generates: /pages/hello-world
    { params: { slug: "hello-world" } },
    // Generates: /pages/my-first-blog-post
    { params: { slug: "my-first-blog-post" } },
    // Generates: /pages/astro-ftw
    { params: { slug: "astro-ftw" } },
    // ...
  ]
}
---


<html>
  <head><title>My Page</title></head>
  <body>URL Param is {Astro.request.params.slug}</body>
</html>

Astro es un constructor de sitios estáticos, así que necesitas decirle a Astro qué páginas construir para cada ruta dinámica. Definir tus rutas manualmente puede parecer boilerplate, pero la construcción de páginas anticipada es exactamente lo que hace que los sitios web estáticos sean tan rápidos para tus usuarios.

getStaticPaths() es una función async, así que puedes – ¡y deberías! – usarla para cargar datos externos en tu sitio web. Normalmente nos encanta usar la Pokemon API en nuestros ejemplos, pero probablemente querrás usar tu CMS headless favorito:

src/pages/posts/[id].astro
// Tell Astro what pages to build for your route "/pages/:id"
export async function getStaticPaths() {
  // Lets fetch posts from CSS Tricks' Headless CMS:
  const CSS_TRICKS_CMS = "https://css-tricks.com/wp-json/wp/v2/posts"
  const allPosts = await fetch(CSS_TRICKS_CMS).then((r) => r.json())
  // Then, create a new page from every post:
  return allPosts.map((post) => ({
    // Set the URL param ":id" in the page URL
    params: { id: post.id },
    // Pass the post object as a prop to the page
    props: { post },
  }))
}

Para aprender más, consulta nuestra nueva documentación sobre Enrutamiento y la nueva API getStaticPaths(). O, si prefieres aprender con ejemplos, revisa este gran proyecto de Wordpress Headless CMS de Chris Coyier y este ejemplo de Ecommerce con Shopify de Cassidy Williams de Netlify.

Si fuiste usuario de nuestra API original de Collections, este nuevo sistema de enrutamiento basado en archivos reemplaza completamente a Collections con muchos mensajes de advertencia amigables para ayudarte a actualizar. Esperamos que esta nueva API elimine todas las frustraciones comunes que los usuarios habían reportado con la API de Collections.

Directiva de carga client:only

A veces, un componente de UI no puede renderizarse en el servidor. Tal vez sea porque has encontrado un bug en una de tus dependencias, o tal vez estés usando una biblioteca como D3 que no puede ejecutarse sin el objeto window del navegador.

Puedes intentar envolver código exclusivo del navegador con tu propia interfaz de fallback estática del lado del servidor. Sin embargo, la mayoría de los usuarios querían una forma de renderizar un componente exclusivo del navegador sin el boilerplate adicional. Entrando, client:only.

Astro 0.19 incluye la nueva directiva de carga client:only para hidratar tu componente en el navegador sin renderizado del lado del servidor. Esto proporciona un fallback simple y directo para cualquier componente exclusivo del navegador.

<!-- only renders in the browser, no placeholder HTML -->
<MyReactComponent client:only />

client:only es ahora nuestra quinta directiva para que controles completamente el comportamiento de carga de tus componentes. Visita nuestro sitio de docs para ver el conjunto completo y aprender más sobre Hidratación Parcial.

🎉 Esta increíble característica fue contribuida por Tony Sull de Navillus. ¡Gracias, Tony!

Astro.resolve()

Astro 0.19 incluye una nueva función helper Astro.resolve() para resolver referencias relativas a archivos en tus plantillas. Con esta nueva característica, puedes hacer referencia a assets relativos (como imágenes) dentro de tus componentes y Astro devolverá la URL correcta para el navegador.

Anteriormente, siempre tenías que colocar archivos en el directorio public/ y referenciarlos por ruta URL absoluta. Las rutas relativas dentro del directorio src/ no funcionaban porque se enviaban directamente al navegador, tal cual. Diferentes páginas terminaban creando diferentes URLs:

<!-- This works the same on every page: -->
<img src="/logo.png" />
<!-- But this means different things on different pages: -->
<img src="../logo.png" />

A partir de Astro 0.19, ahora puedes usar la nueva función helper Astro.resolve() para crear una referencia de URL absoluta desde cualquier ruta relativa:

<!-- Astro component input: -->
<img src={Astro.resolve('../images/logo.png')} />
<!-- HTML output: -->
<img src="/_astro/src/images/logo.png" />

Si te ayuda, puedes pensar en Astro.resolve() como una alternativa simplificada a hacer new URL(yourRelativePath, import.meta.url).pathname en el navegador.

Astro.resolve() te da más opciones y más control sobre cómo estructurar tu proyecto. En el futuro, esto también desbloqueará nuestra capacidad de servir imágenes optimizadas directamente desde tu directorio src/.

🎉 Esta increíble característica fue contribuida por Jonathan Neal y Matthew Phillips!

Traducciones de Docs

No todos los desarrolladores hablan inglés. De hecho, la mayoría no lo hace. Por suerte, algunos increíbles colaboradores de nuestra comunidad se unieron para traducir la documentación de Astro para una audiencia global. Actualmente estamos trabajando en traducciones en 10 idiomas diferentes, incluyendo:

  • 简体中文
  • 正體中文
  • Български
  • Deutsch
  • English
  • Español
  • Français
  • Nederlands
  • Português
  • Suomi
  • Русский

Estas todavía son un trabajo en progreso, y seguiremos trabajando hacia una traducción del 100% a medida que nos acercamos al lanzamiento de v1.0. Si conoces algunos idiomas y puedes contribuir, ¡realmente necesitamos tu ayuda!

Open Collective

Ha pasado un poco más de dos meses desde el primer lanzamiento de Astro. En ese lanzamiento, delineamos nuestro compromiso tanto con un Astro gratuito y de código abierto como con la sostenibilidad financiera a largo plazo del proyecto. Hoy, anunciamos nuestro primer experimento hacia la sostenibilidad a largo plazo:

Empresas e individuos ahora pueden patrocinar el desarrollo de Astro con Open Collective. Visita nuestro Open Collective →

Creamos un Open Collective porque el patrocinio corporativo es uno de los pocos caminos probados hacia la sostenibilidad financiera en el código abierto. Sin embargo, está lejos de ser un modelo perfecto. La mayoría de las contribuciones solo van a un puñado de proyectos populares, y el resto nunca recibe ningún soporte significativo. Las probabilidades están en nuestra contra pero creemos en Astro, nuestra comunidad, y la emoción que sigue creciendo alrededor de este proyecto.

Es probable que tu empresa se beneficie del software de código abierto. Invierte en las tecnologías que impulsan tu negocio patrocinando a Astro y cualquier otro proyecto de código abierto que uses. Bonus: miles de desarrolladores verán tu logo en nuestro README y en la página principal de astro.build, todos los días.

El 100% de los fondos recaudados se invierten directamente de vuelta en el proyecto y nuestra comunidad. Puedes leer más sobre cómo se distribuyen los fondos leyendo nuestro doc FUNDING.md en GitHub.

Estaremos tuiteando mensajes personales de “gracias” a cada persona y empresa que presione el botón de “Sponsor” en las próximas 48 horas. Nuestro primer y muy especial GRACIAS va para Chris Jennings, CCO y cofundador de Sentry, por ser nuestro primer patrocinador oficial. 🎉

Por si te lo perdiste

GitHub añadió soporte oficial para archivos .astro y resaltado de sintaxis astro en toda su plataforma. Para no quedarse atrás, CodeSandbox rápidamente hizo lo mismo con su propio soporte.

¡Este es un hito enorme para Astro, especialmente considerando lo joven que es el proyecto! Gracias a todos los que usaron Astro, crearon proyectos, y mostraron a estas plataformas lo valioso que es realmente Astro.

¡Es oficial! 🎉 @github ahora soporta resaltado de sintaxis para archivos .astro!


También puedes usar bloques de código que empiecen con astro para obtener el resaltado adecuado en archivos Markdown, issues, y comentarios de PR.


pic.twitter.com/CDiGw66Qw6

— Astro (@astrodotbuild) 4 de agosto de 2021

👋

¡Gracias por leer! Síguenos en Twitter para mantenerte al día a medida que nos acercamos al lanzamiento de v1.0. También puedes revisar nuestro post del lanzamiento anterior para más actualizaciones sobre Astro.

Y, si has leído hasta aquí, definitivamente deberías unirte a nosotros en Discord. ;)