Hace unos días el Framework Astro, ha publicado su version 2.0. Y como ya he creado un curso del tema, en este artículo me gustaria comentarles que hay de nuevo y como esta cambiando el Framework, por que con cada actualización este se esta convirtiendo en basicamente un MetaFramework.
¿Qué es Astro?
Para aquellos que no conocen Astro, este es un proyecto que inicio primero permitiendo crear sitios web estaticos solamente, de forma similar como lo hacen proyectos como Gatsby, Hugo o Jekyll, o cualquier generador de sitios estaticos.
Sin embargo, Astro la ventaja que puede crear sitios que usan componentes creados en frameworks como React, Svelte, Vue, Solid y otros. ademas de tener un diseño que carga parcialmente el código llamado Astro Islands, lo que hace que un sitio sea mayormente HTML, y solo carge Javascript si es requerido.
Bueno en cada nueva version Astro, a mi modo de ver. este se alaja mas de solo ser un generador de sitios estaticos y se acerca más a lo que seria un Meta Framework de forma similar a Nextjs en el mundo de React. y de esto quiero hablarles el dia de hoy.
3 Actualizaciones de Astro 2.0
la version 2.0 de Astro no significa que tu codigo anterior de astro deje de funcionar, es decir No hay Breaking Changes, asi que solo son nuevas caracteristicas añadidas, y el curso de Astro que cree hace unos meses sigue siendo valido completamente.
Astro trae 2 actualizaciones importantes principalmente:
- Content Collections
- Hybrid rendering
Suena complicado, pero son bastante simples de entender. empecemos con Content Collection.
Content Collection
Los Content collecton es una caracteristica que significa el poder usar Typescript dentro de Markdown.
Con esto podrias tener autocompletado al momento que generas contenido estatico como los articulos de un blog, o noticias por ejemplo.
https://astro.build/assets/blog/introducing-content-collections/data-demo.mp4
Ademas que ahora tambien puedes añadi un esquema de tipos de datos para que Astro los valide, y que esta basado en Zod la biblioteca de Typescript.
const blog = defineCollection({
schema: z.object({
// Define your expected frontmatter properties
title: z.string(),
// Mark certain properties as optional
draft: z.boolean().optional(),
// Transform datestrings to full Date objects
publishDate: z.string().transform((val) => new Date(val))
// Improve SEO with descriptive warnings
description: z.string().max(160, 'Short descriptions have better SEO!')
// ...
}),
});
Si quieren saber más de Zod, recuerden que hay un tutorial en Fazt code.
Colocar las miniaturas de cada video, estos estan en fazt code
Ademas que los errores que ahora Astro muestra ya no son tan genericos, pasando de algo como esto:
https://astro.build/_astro/banner-error-overlay-old.d6a20783_ZN33Eg.avif
a una mejor descripcion, que explica lo que esta mal:
https://astro.build/_astro/banner-error-overlay.74d87083_g7Vpi.avif
Hybrid rendering
EN su primer version Astro muy aparte de permitir generar contenido statico(SSG), este tambien permitia usar Server side rendering (SSR) añadiendo un backend de Nodejs.
Sin embargo Astro solo permitia uno a la vez, es decir o bien tu sitio era contenido etatico o bien server side rendering. Si quieres entender ambos conceptos, recuerda que hay un video de cada uno de etos
Colocar las miniaturas de cada vide estan en fazt
QUE ES SSG que es SSR
EN la nueva version astro ahora permite que en un mismo proyecto puedas tener en unas paginas con contenido etatico y otras server side randering, similar a lo que ofrece Nextjs.
solo que en atro debes exportar una constante llamad prerender en true, para que el framework lo procese en el servidor:
---
export const prerender = true;
// ...
---
<html>
<!-- Page here... -->
</html>
Esto al final hace que Astro pase de ser una herramienta para crear solo sitios sencillos a practicamente un Framework más completo con el que se puede crear tambien contenido dinamico, o aplicaciones frontend más complejas, ya que recuerden que si bien el contenido estatico es rapido, este no cambia sino se vuelve a generar todo el sitio otra vez ,en cambio con SSR, puedes tener contenido dinamico que es procesado en cada peticion.
Aunque estas no son la unicas actualizaciones, otras tambien son que esta usando Vitejs 4.0, y han mejoadola velocidad del Hot Module Reloading (HMR).
Conclusión
Ahora si pones a Nextjs o Astro, es obvio que Nextjs tiene más caracteristicas, pero Astro a futuro podria ser una opcion a su mismo nivel, porque mientras que Nextjs solo funciona con React, Astro permite cargar componentes de otros frameworks y tiene a ser más sencillo de usar. , aunque de momento esto aun esta lejos,pero la base la tienen, esperemos ver más avances y de momento seguire usandolo principalmente para contenido estatico.
Por cierto si quieres empezar a probar Astro, tambien tiene el sitio astro.new que te permite abrir proyectos directamente desde el navegador sin tener que instalar nada.
Ademas que el curso que ya he creado hace unos meses, sigue siendo completamente valido, asi que si quieren aprenderlo lo dejo en la descripcion.
Nos vemos un siguente video