Exploramos las principales ventajas de Astro como framework moderno para construir sitios web estáticos y dinámicos.

15 de agosto de 2025 • afrolino02 • Desarrollo Web
#astro#web development#static site#performance#frontend

Astro es un framework moderno que está transformando la forma en que construimos sitios web. En este artículo exploraremos las principales ventajas que lo convierten en una excelente elección para tus proyectos.

¿Qué es Astro?

Astro es un framework para construir sitios web estáticos ultra-rápidos. A diferencia de otros frameworks, Astro implementa una arquitectura basada en islas, lo que significa que solo carga el JavaScript necesario en el cliente.

---
// Un componente Astro no envía JS al cliente por defecto
const titulo = "Mi sitio rápido";
const autor = "Andrés Puello";
---

<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>{titulo}</title>
  </head>
  <body>
    <h1>{titulo}</h1>
    <p>Por {autor}</p>
  </body>
</html>

Estructura de un proyecto Astro

Un proyecto típico tiene esta estructura:

src/
├── components/
│   ├── ui/              # Componentes reutilizables
│   ├── layout/          # Layouts compartidos
│   └── sections/        # Secciones de páginas
├── content/             # Colecciones de contenido
│   ├── projects/
│   └── blog/
├── layouts/             # Layouts Astro
├── pages/               # Rutas del sitio
│   ├── index.astro
│   ├── blog/
│   │   └── [slug].astro
│   └── projects/
│       └── [slug].astro
└── styles/              # Estilos globales

Componentes Astro: lo básico

Los componentes Astro son archivos .astro con un frontmatter de TypeScript y un template HTML.

---
// Props tipados
interface Props {
  nombre: string;
  veces?: number;
}

const { nombre, veces = 1 } = Astro.props;
const items = Array.from({ length: veces }, (_, i) => i + 1);
---

<div class="saludo">
  <h2>¡Hola, {nombre}!</h2>
  <ul>
    {items.map((i) => (
      <li>Saludo #{i}</li>
    ))}
  </ul>
</div>

<style>
  .saludo {
    color: tomato;
  }
</style>

Slots: composición de contenido

Los slots permiten inyectar contenido hijo en un componente, similar a children en React.

---
interface Props {
  title: string;
  description?: string;
}

const { title, description = "Mi sitio web" } = Astro.props;
---

<html lang="es">
  <head>
    <title>{title}</title>
    <meta name="description" content={description} />
  </head>
  <body>
    <header>
      <slot name="header" />
    </header>
    <main>
      <slot />
    </main>
    <footer>
      <slot name="footer" />
    </footer>
  </body>
</html>

---
import BaseLayout from "../layouts/BaseLayout.astro";
---

<BaseLayout title="Inicio" description="Página principal">
  <h1 slot="header">Bienvenido</h1>
  <p>Contenido principal de la página.</p>
  <small slot="footer">© 2025</small>
</BaseLayout>

Ventajas principales

1. Rendimiento superior

Astro elimina automáticamente el JavaScript innecesario del lado del cliente, resultando en sitios más rápidos y con mejor puntuación en métricas de Core Web Vitals.

Por defecto, un componente Astro se renderiza a HTML estático en el servidor. Solo si usas directivas como client:load o client:visible se hidrata JavaScript en el cliente.

2. Compatibilidad con múltiples frameworks

Puedes usar componentes de React, Vue, Svelte, Solid y otros frameworks dentro del mismo proyecto de Astro.

---
import Contador from "../components/Contador.tsx";
// Esta es una "isla" interactiva
---

<section>
  <h2>Mi contador</h2>
  <Contador client:visible />
</section>

3. Arquitectura basada en islas

Esta arquitectura permite cargar solo las partes interactivas de la página, manteniendo el resto como HTML estático.

4. Integraciones poderosas

Astro tiene una gran cantidad de integraciones disponibles para CMS, herramientas de análisis, y más.

# Agregar integraciones oficiales
npx astro add react
npx astro add tailwind
npx astro add mdx
npx astro add sitemap

Recolección de datos en build time

Astro ejecuta getStaticPaths en build time para generar las páginas dinámicas:

---
import { getCollection } from "astro:content";

export async function getStaticPaths() {
  const posts = await getCollection("blog");
  return posts.map((post) => ({
    params: { slug: post.data.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await post.render();
---

<article>
  <h1>{post.data.title}</h1>
  <Content />
</article>

Conclusión

Astro representa un cambio de paradigma en el desarrollo web moderno, ofreciendo una solución híbrida que combina lo mejor de los sitios estáticos y las aplicaciones web dinámicas.