En esta guía práctica se explicará qué es Astro.js, por qué es tan rápido, sus características principales y cómo crear tu primera página paso a paso. Veremos sus puntos clave y varios ejemplos de código listos para usar.
Astro.js se ha convertido en uno de los frameworks más interesantes del ecosistema frontend moderno. Su propuesta suena sencilla: generar HTML estático por defecto, enviar la mínima cantidad de JavaScript posible al navegador y permitirte usar los frameworks que ya conoces (React, Vue, Svelte, etc.) solo donde realmente aportan valor.
Este post se centrará en tres puntos claves:
- Explicar de forma clara qué es Astro.js y por qué es importante.
- Ver sus características más relevantes con ejemplos concretos.
- Crear una pequeña página de ejemplo paso a paso que puedas reutilizar o ampliar.
Qué vas as ver en esta entrada
¿Qué es Astro.js?
Astro.js es un framework orientado a contenido que genera HTML estático por defecto. En vez de montar una SPA pesada para todo, Astro.js apuesta por:
- Renderizar la página en el build o en el servidor.
- Enviar al cliente solo el HTML y el CSS necesarios.
- Añadir JavaScript únicamente en las “islas” donde hace falta interactividad.
Puedes verlo como una evolución moderna de los generadores de sitios estáticos, pero compatible con el ecosistema actual: componentes, layouts, integración con React/Vue/Svelte, soporte para Markdown, etc.
Para entender Astro.js, debemos conocer estos puntos muy importantes:
- Astro.js no intenta reemplazar a React o Vue; los orquesta y solo hidrata los componentes que tú marques.
- Está pensado para blogs, webs corporativas, documentación, landings y proyectos donde el contenido y el rendimiento importan mucho.
- Permite escalar desde una simple página estática hasta proyectos grandes con distintas secciones, layouts y rutas dinámicas.
Qué hace a Astro.js tan potente y relevante hoy en día
Hay varios motivos por los que Astro.js ha ganado tanta relevancia:
1. Rendimiento por defecto
- El navegador descarga mucho menos JavaScript que en una SPA tradicional.
- Menos JS significa menos tiempo de bloqueo, mejor LCP y mejores métricas de Core Web Vitals.
- El resultado son páginas que se sienten rápidas incluso en dispositivos modestos o conexiones lentas.
2. SEO más sencillo
- El contenido ya viene en HTML renderizado, sin depender de que el JS se ejecute en el cliente.
- Los bots de los buscadores “ven” el contenido desde el primer momento, lo que facilita el posicionamiento.
- Es ideal para blogs, documentación técnica, ecommerce de catálogo, etc.
3. Flexibilidad de componentes
- Puedes usar componentes de React, Vue, Svelte, Solid, Preact o incluso Web Components.
- En el mismo proyecto puedes mezclar tecnologías sin necesidad de casarte con una sola.
- Esto permite reutilizar cosas que ya tengas hechas en otros proyectos.
4. Experiencia de desarrollo moderna
- Integración simple con TypeScript, CSS frameworks, Markdown/MDX, etc.
- Configuración relativamente sencilla: el fichero astro.config.* se entiende bien y no es intimidante.
- Soporta hot reload, integraciones oficiales y un ecosistema de plugins que crece muy rápido.
5. Preparado para integraciones y despliegue
- Puedes desplegar fácilmente en plataformas como Netlify, Vercel, GitHub Pages o tu propio servidor.
- Se integra bien con CMS headless, APIs externas y otras herramientas del ecosistema JavaScript.
Características clave de Astro.js y cómo usarlas
A continuación van algunas de las características de Astro.js más utilizadas en el día a día:
Sistema de rutas basado en archivos
En Astro, cada archivo en src/pages se convierte en una ruta. No necesitas configurar un router manualmente.
Con solo crear estos archivos, ya tienes definidas las rutas principales de tu sitio. Sintaxis .astro: frontmatter + markup
Los archivos .astro tienen dos partes:
- Un bloque superior entre — (frontmatter) donde escribes lógica, importaciones, datos, etc.
- El HTML de la página, donde puedes usar variables, componentes y expresiones.
---
// Frontmatter: se ejecuta en servidor/build
const title = "Mi primera página con Astro.js";
const description = "Ejemplo básico para entender la sintaxis de Astro.";
---
<!-- Esto es el contenido (HTML, se renderiza en el cliente) -->
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>{title}</title>
</head>
<body>
<main>
<h1>{title}</h1>
<p>{description}</p>
</main>
</body>
</html>
Componentes reutilizables
Puedes crear componentes .astro que reciban props y reutilizarlos en distintas páginas. Esto es clave para mantener el código ordenado.
---
// src/components/PostCard.astro
const { title, date, description } = Astro.props;
---
<article class="post-card">
<h3>{title}</h3>
<p><small>{date}</small></p>
<p>{description}</p>
</article>
Y luego lo usas en una página:
---
// src/pages/index.astro
import PostCard from "../components/PostCard.astro";
const posts = [
{
title: "Introducción a
Astro.js", date: "2025-02-01",
description: "Qué es Astro.js, casos de uso y por qué es tan rápido.",
},
{
title: "Componentes y layouts en Astro.js",
date: "2025-02-10",
description: "Cómo organizar tu proyecto con layouts reutilizables.",
},
];
---
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Blog técnico con Astro.js</title>
</head>
<body>
<main>
<header>
<h1>Blog técnico con Astro.js</h1>
<p>
Ejemplo práctico de listado de artículos usando componentes .astro.
</p>
</header>
<section>
<h2>Artículos recientes</h2>
<ul>
{posts.map((post) => (
<li>
<PostCard title={post.title} date={post.date}
description={post.description}
/>
</li>
))}
</ul>
</section>
</main>
</body>
</html>
Layouts: estructura común para varias páginas
Los layouts te permiten definir una estructura común (cabecera, pie, estilos, etc.) y reutilizarla en todas las páginas.
---
// src/layouts/BaseLayout.astro
const { title } = Astro.props;
---
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>{title}</title>
<link rel="stylesheet" href="/styles/global.css" />
</head>
<body>
<header class="site-header">
<h1>Mi sitio con Astro.js</h1>
</header>
<main class="site-main">
<slot />
</main>
<footer class="site-footer">
<p>© {new Date().getFullYear()} – Ejemplo con Astro.js</p>
</footer>
</body>
</html>
Y luego en tus páginas usas el layout:
---
// src/pages/index.astro
import BaseLayout from "../layouts/BaseLayout.astro";
const title = "Inicio – Blog técnico con Astro.js";
---
<BaseLayout title={title}>
<section>
<h2>Bienvenido al blog</h2>
<p>
Este es un ejemplo de página que utiliza un layout compartido en Astro.js.
</p>
</section>
</BaseLayout>
Estilos globales y por componente
Puedes usar un CSS global o estilos scoped dentro de cada componente .astro.
/* public/styles/global.css */
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
background: #020617;
color: #e5e7eb;
}
.site-main {
max-width:
960px; margin: 0
auto;
padding: 2rem 1.5rem 3rem;
}
.post-card {
border-radius: 12px;
padding: 1rem 1.25rem;
margin-bottom: 1rem;
background: #020617;
border: 1px solid
#1e293b;
}
También puedes definir estilos dentro de un componente:
---
// src/components/PostCard.astro
const { title, date, description } = Astro.props;
---
<article class="post-card">
<h3>{title}</h3>
<p><small>{date}</small></p>
<p>{description}</p>
</article>
<style>
.post-card h3 {
margin: 0 0
0.25rem; font-size:
1.1rem;
}
.post-card small
{ opacity: 0.7;
}
</style>
Islas de interactividad (partial hydration)
Una de las características más potentes de Astro.js es que puedes crear “islas” interactivas usando componentes de React, Vue, etc., y decirle explícitamente cuándo deben hidratarse en el cliente.
Ejemplo sencillo con un componente de React:
// src/components/Counter.jsx
import { useState } from "react";
export default function Counter() {
const [value, setValue] =
useState(0); return (
<div>
<p>Valor actual: {value}</p>
<button onClick={() => setValue(value + 1)}>
Incrementar
</button>
</div>
);
}
Uso del componente React en una página Astro
--- // src/pages/interactivo.astro import BaseLayout from "../layouts/BaseLayout.astro"; import Counter from "../components/Counter.jsx"; --- <BaseLayout title="Página interactiva con Astro.js"> <section> <h2>Ejemplo de isla interactiva</h2> <p>Este contador es un componente React hidratado en el cliente.</p> <Counter client:load /> </section> </BaseLayout>
El atributo client:load indica a Astro que debe enviar el JavaScript necesario para ese componente y montarlo al cargar la página. Hay otras variantes como client:idle, client:visible, etc., que controlan cuándo se hidrata para optimizar aún más el rendimiento.
Crear el proyecto desde cero: pasos rápidos
Para que todo esto sea más concreto, estos son los comandos básicos que usarías en un proyecto real con Astro.js:
# Crear proyecto npm create astro@latest astro-ejemplo
# Instalar dependencias npm install
# Ejecutar en desarrollo npm run dev
# Generar build estático npm run build
# Previsualizar build npm run preview
Conclusión
Astro.js se ha ganado un hueco importante en el ecosistema frontend porque se centra en algo que muchas veces se da por hecho: servir HTML rápido, ligero y optimizado para SEO, sin obligarte a montar una SPA enorme para cualquier cosa.
Sus puntos clave son:
- HTML estático por defecto y muy poco JavaScript en el cliente.
- Arquitectura de componentes y layouts fácil de entender.
- Integración con React, Vue, Svelte y otros frameworks cuando realmente los necesitas.
- Un modelo de “islas de interactividad” que te permite mezclar contenido estático y partes dinámicas con control fino.
En este post hemos visto qué es Astro.js, por qué es interesante y cómo montar un pequeño ejemplo con rutas, componentes, layouts, estilos y una isla interactiva. A partir de aquí, se puede seguir ampliando el proyecto con contenido dinámico, colecciones de contenido, integraciones con APIs externas y despliegues en diferentes plataformas, manteniendo siempre como base la filosofía de Astro.js: menos JavaScript, más rendimiento.
Si te interesa estar al día en desarrollo web, arquitectura y buenas prácticas en programación, síguenos en nuestras redes sociales y Canal de YouTube.