Astro.js

¿Qué es Astro.js?

Astro.js es un framework moderno para construir sitios web que se enfoca en performance y velocidad. Su principal característica es que genera sitios web estáticos por defecto, enviando cero JavaScript al navegador a menos que sea absolutamente necesario.

¿Para qué sirve Astro.js?

Astro.js es ideal para:

Crear sitios web estáticos ultra-rápidos (blogs, portfolios, documentación).
Construir aplicaciones web con múltiples frameworks (React, Vue, Svelte, etc.) en un mismo proyecto.
Optimizar automáticamente imágenes, CSS y JavaScript.
Generar sitios con excelente SEO y Core Web Vitals.

¿Cómo funciona?

Astro utiliza una arquitectura llamada “Islands Architecture”. Imagina tu página web como una isla tropical: la mayor parte es estática (la playa), pero puedes tener pequeñas zonas interactivas (palmeras con cocos) que solo cargan JavaScript cuando es necesario.

Ejemplo: Componente básico de Astro

Un componente de Astro combina HTML, CSS y JavaScript en un solo archivo .astro.

---
// Script del servidor (se ejecuta en build time)
const title = "Mi sitio con Astro";
const items = ["Rápido", "Moderno", "Flexible"];
---

<!-- HTML Template -->
<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <ul>
      {items.map(item => <li>{item}</li>)}
    </ul>
  </body>
</html>

<style>
  h1 {
    color: #ff6b35;
    font-size: 2rem;
  }
  ul {
    list-style: none;
    padding: 0;
  }
</style>

Este componente genera HTML estático sin enviar JavaScript al navegador, resultando en una carga ultra-rápida.

Características principales

Zero JS por defecto: Solo envía JavaScript cuando lo necesitas.
Multi-framework: Usa React, Vue, Svelte, etc. en el mismo proyecto.
File-based routing: Las rutas se crean automáticamente basadas en la estructura de archivos.
Server-side rendering: Renderiza en el servidor para mejor SEO.
Optimizaciones automáticas: Comprime imágenes, minifica CSS y JS.

¿Cuándo usar Astro.js?

Sitios web con contenido mayormente estático.
Blogs y sitios de documentación.
Landing pages y portfolios.
E-commerce con pocas interacciones.
Cuando la performance es crítica.

Conclusión

Astro.js revoluciona el desarrollo web al priorizar la velocidad y la experiencia del usuario. Te permite construir sitios web modernos sin sacrificar performance, combinando lo mejor de los frameworks actuales con una arquitectura inteligente que envía solo el código necesario.

Aquí puedes ver una Cheatsheet completa de Astro.js