Tag: Astro

Un developer me escribió hace unas semanas. Tenía una landing page para un producto que estaba a punto de lanzar. La había montado con Next.js porque “era lo que conocía”. El tiempo de build era de 4 minutos. El bundle pesaba más de lo que debería. Y lo único que necesitaba era una página estática con una sección hero, tres features y un formulario de contacto.

Next.js para eso es como usar un martillo neumático para clavar un cuadro.

La respuesta que le di fue una sola palabra: Astro. Y ahora, con Astro v7, esa respuesta es más sólida que nunca.

---

Qué es Astro, por si llevas tiempo mirando para otro lado

Astro es un framework de generación de sitios estáticos que tiene una idea central brillante: envía cero JavaScript al cliente por defecto. Solo envía HTML y CSS. Si necesitas interactividad en algún componente concreto, la añades con lo que quieras: React, Vue, Svelte, Lit — Astro lo llama “islands”.

Para landings, blogs, documentación y cualquier sitio orientado al contenido, no hay nada más rápido ni más sencillo de mantener.

Astro v7 lleva esa idea más lejos que nunca. Y los números lo avalan.

---

Las novedades reales de Astro v7

Astro v7 es la séptima versión mayor del framework, lanzada en 2026, que introduce un compilador reescrito en Rust, Vite 8 con Rolldown y Route Caching estable como cambios principales. Es la versión con el mayor salto de rendimiento desde el lanzamiento del framework.

El compilador se reescribió en Rust — y se nota

La parte más importante de esta versión no es una nueva API. Es que el compilador de .astro pasó de estar escrito en Go a estar escrito en Rust.

El resultado: builds entre un 15% y un 61% más rápidos en benchmarks reales. El sitio de documentación oficial de Astro pasó de tardar 114 segundos en construirse a 73. El propio astro.build bajó de 62 segundos a 24 (datos oficiales del blog de Astro).

Eso es el tipo de mejora que no se consigue ajustando configuraciones. Es un cambio de arquitectura.

El tradeoff: el compilador Rust es más estricto con HTML inválido. Antes, si dejabas una etiqueta sin cerrar, Astro la corregía silenciosamente. Ahora lanza un error. Lo cual, seamos honestos, es el comportamiento correcto.

Vite 8 con Rolldown — el bundler en Rust también

Astro v7 actualiza a Vite 8, que trae Rolldown: un bundler escrito en Rust que reemplaza tanto a esbuild como a Rollup con una sola herramienta unificada. En benchmarks, es 10-30 veces más rápido que Rollup.

La compatibilidad con la API de plugins de Rollup y Vite se mantiene. Si tienes plugins existentes, seguirán funcionando.

Nuevo procesador Markdown: Sätteri

El pipeline de Markdown ha cambiado por completo. El procesador anterior basado en unified, remark y rehype ha sido reemplazado por Sätteri, un procesador escrito también en Rust.

Sätteri incluye de serie: GitHub Flavored Markdown, tipografía inteligente, IDs de encabezados, directivas, matemáticas y frontmatter. Sin configuración adicional.

Si tenías plugins personalizados de remark o rehype, puedes volver al pipeline anterior instalando @astrojs/markdown-remark y configurándolo explícitamente. No pierdes nada — solo dejas de tenerlo por defecto.

Route Caching ahora es estable

El sistema de caché de rutas, que estaba en experimental, ya es parte de la API estable. Puedes controlar el caché de cada respuesta con una API agnóstica a la plataforma:

// En cualquier página .astro o endpoint
Astro.cache.set({
  maxAge: 120,     // 2 minutos en caché de cliente/servidor
  swr: 60,         // 1 minuto de revalidación en background
  tags: ['products']
});

Y cuando necesitas invalidar:

await cache.invalidate({ tags: ['products'] });

Para Netlify, Vercel y Cloudflare hay CDN cache providers experimentales que traducen estas directivas a la capa edge de cada plataforma.

Advanced Routing — control total del pipeline

Astro v7 introduce un archivo src/fetch.ts que te da acceso completo al pipeline de solicitudes, antes de que Astro las procese. Compatible con Hono para middleware:

// src/fetch.ts
import { astro } from 'astro/fetch';

export default {   fetch(request: Request) {     const url = new URL(request.url);

// Intercepta rutas /api antes de que lleguen a Astro     if (url.pathname.startsWith('/api')) {       return fetch('https://mi-backend.com' + url.pathname, request);     }

return astro(request);   } }

Si ya tienes un src/fetch.ts propio en tu proyecto, Astro v7 lo detectará y te pedirá que lo renombres o que desactives esta feature.

Modo para agentes IA

Esto es interesante si construyes herramientas con IA o trabajas con Claude Code, Cursor u otros coding agents. Astro v7 detecta automáticamente cuando está corriendo dentro de un agente y activa dos comportamientos:

1. Inicia el servidor de desarrollo en modo background con astro dev --background
2. Cambia los logs a formato JSON estructurado para que el agente los pueda parsear

# Arranque idempotente — no lanza otro servidor si ya hay uno corriendo
astro dev --background

# Estado del servidor astro dev status

# Logs en JSON astro dev --json

---

Astro v6 vs v7 — qué cambió exactamente

Área	Astro v6	Astro v7
Compilador .astro	Go	Rust (15-61% más rápido)
Bundler	Vite 7 + Rollup	Vite 8 + Rolldown (Rust)
Procesador Markdown	unified / remark / rehype	Sätteri (Rust, GFM incluido)
Route Caching	Experimental	Estable (Astro.cache.set)
Routing avanzado	No disponible	src/fetch.ts estable
Modo agente IA	No disponible	astro dev --background + logs JSON
HTML inválido	Corregido silenciosamente	Error de compilación (más estricto)
@astrojs/db	Disponible	Eliminado → migrar a node:sqlite

---

Cómo crear tu landing con Astro v7 — paso a paso

Paso 1 — Instalación

npm create astro@latest mi-landing

El wizard te preguntará si quieres una plantilla vacía, con blog, o con un starter. Para una landing, elige “Empty” o “A basic, minimal starter”.

cd mi-landing
npm run dev

Tu servidor de desarrollo estará en http://localhost:4321.

Paso 2 — Estructura del proyecto

mi-landing/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   ├── Hero.astro
│   │   ├── Features.astro
│   │   └── Footer.astro
│   ├── layouts/
│   │   └── BaseLayout.astro
│   └── pages/
│       └── index.astro
├── astro.config.mjs
└── package.json

Paso 3 — El layout base

---
// src/layouts/BaseLayout.astro
interface Props {
  title: string;
  description: string;
}

const { title, description } = Astro.props; 


<!doctype html> <html lang="es">   <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta name="description" content={description} />     <title>{title}</title>   </head>   <body>     <slot />   </body> </html>

Paso 4 — Los componentes de la landing

---
// src/components/Hero.astro
interface Props {
  headline: string;
  subheadline: string;
  ctaText: string;
  ctaHref: string;
}

const { headline, subheadline, ctaText, ctaHref } = Astro.props; 


<section class="hero">   <h1>{headline}</h1>   <p>{subheadline}</p>   <a href={ctaHref} class="cta-btn">{ctaText}</a> </section>

<style>   .hero {     display: flex;     flex-direction: column;     align-items: center;     padding: 4rem 1rem;     text-align: center;     gap: 1.5rem;   }

h1 {     font-size: clamp(2rem, 5vw, 3.5rem);     font-weight: 800;     line-height: 1.1;   }

.cta-btn {     display: inline-block;     padding: 0.9rem 2rem;     background: #7c3aed;     color: white;     text-decoration: none;     border-radius: 0.5rem;     font-weight: 600;     transition: opacity 0.2s;   }

.cta-btn:hover {     opacity: 0.85;   } </style>

---
// src/components/Features.astro
const features = [
  {
    icon: "⚡",
    title: "Velocidad real",
    description: "HTML puro en el cliente. Sin JavaScript innecesario."
  },
  {
    icon: "🧩",
    title: "Componentes modulares",
    description: "Divide la UI en piezas reutilizables con props tipadas."
  },
  {
    icon: "🚀",
    title: "Deploy en segundos",
    description: "Estático por defecto. Netlify, Vercel o Cloudflare Pages."
  }
];


<section class="features">   <h2>Por qué esto funciona</h2>   <ul class="features-grid">     {features.map((feature) => (       <li>         <span class="icon">{feature.icon}</span>         <h3>{feature.title}</h3>         <p>{feature.description}</p>       </li>     ))}   </ul> </section>

<style>   .features {     padding: 4rem 1rem;     max-width: 900px;     margin: 0 auto;   }

h2 {     text-align: center;     font-size: 2rem;     margin-bottom: 2.5rem;   }

.features-grid {     display: grid;     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));     gap: 2rem;     list-style: none;     padding: 0;   }

.icon {     font-size: 2rem;     display: block;     margin-bottom: 0.75rem;   }

h3 {     font-size: 1.1rem;     margin-bottom: 0.5rem;   } </style>

Paso 5 — La página principal que lo une todo

---
// src/pages/index.astro
import BaseLayout from '../layouts/BaseLayout.astro';
import Hero from '../components/Hero.astro';
import Features from '../components/Features.astro';


<BaseLayout   title="Mi Producto — La forma más rápida de hacer X"   description="Descripción de 160 caracteres para el SEO." >   <Hero     headline="Resuelve X sin Y"     subheadline="La frase que convierte la curiosidad en intención de compra."     ctaText="Empieza gratis"     ctaHref="#registro"   />   <Features /> </BaseLayout>

Paso 6 — Build y deploy

# Build de producción
npm run build

# Preview local del build npm run preview

El output es estático por defecto: la carpeta dist/ contiene HTML, CSS y los assets optimizados. Sube esa carpeta a Netlify, Vercel o Cloudflare Pages y estás listo.

---

Los breaking changes que tienes que revisar si migras desde v6

Si ya usas Astro y estás actualizando, el comando oficial es:

npx @astrojs/upgrade

Pero antes de ejecutarlo, ten en cuenta estos cuatro puntos:

1. Etiquetas HTML sin cerrar ahora son errores. El compilador Rust no las corrige. Revisa tus componentes .astro buscando

,