Ver video
Next.js es increíble. Lo he usado en decenas de proyectos. Pero para este sitio personal, elegí Astro. Y no fue una decisión fácil.
El contexto
Necesitaba un sitio simple:
- Homepage personal
- Blog/laboratorio de experimentos
- Rápido, muy rápido
- Fácil de mantener
- SEO optimizado
Podría haber usado Next.js. Lo conozco bien, tengo componentes reutilizables, y es el “estándar de la industria”.
Pero tenía una pregunta incómoda: ¿realmente necesito todo ese JavaScript en el cliente para un sitio de contenido estático?
La comparación honesta
Lighthouse Scores
Next.js App Router (mi implementación anterior):
- Performance: 78
- FCP: 1.8s
- LCP: 2.4s
- Bundle size: 186KB (solo React)
Astro v5 (implementación actual):
- Performance: 100
- FCP: 0.4s
- LCP: 0.6s
- Bundle size: 4.68KB (solo ThemeToggle interactivo)
Diferencia brutal. Y estos son números reales, no marketing.
Developer Experience
Next.js gana en:
- ✅ Ecosistema masivo
- ✅ Herramientas de desarrollo maduras
- ✅ Routing file-based familiar
- ✅ API routes integradas
- ✅ Más ejemplos y tutoriales
Astro gana en:
- ✅ Velocidad de build (3x más rápido)
- ✅ Simplicidad del mental model
- ✅ Content Collections nativas
- ✅ Menos configuración necesaria
- ✅ Zero JS por defecto
Costos reales
Para un sitio estático simple:
Next.js:
- Vercel Hobby: Gratis (pero con límites)
- Edge Functions count hacia el límite
- Rebuild en cada deploy (más lento)
Astro:
- Deploy a cualquier hosting estático
- Build súper rápido
- Sin consumo de edge functions
- Netlify/Vercel/Cloudflare: todos gratis
Cuándo usar cada uno
Usa Next.js si:
- Necesitas SSR real (datos dinámicos por request)
- Tu app es muy interactiva (dashboard, SaaS)
- Necesitas API routes
- Tu equipo ya domina React
- Quieres Vercel analytics/features integradas
Usa Astro si:
- Tu sitio es principalmente contenido
- Performance es crítica
- Quieres menos JavaScript
- Tienes un blog, docs, o sitio marketing
- Quieres usar múltiples frameworks (React + Vue + Svelte)
Lo que me sorprendió de Astro
1. Content Collections
En Next.js, tenía que usar gray-matter, remark, configurar MDX manualmente. En Astro:
const posts = await getCollection('lab');Ya está. Type-safe, con schema validation incluido.
2. Islands Architecture
Solo el ThemeToggle tiene JavaScript. El resto es HTML estático. En Next.js, aunque uses SSG, sigues enviando el React runtime.
3. Build times
Next.js: ~45s Astro: ~4s
Para un sitio pequeño, la diferencia no parece mucho. Pero cuando iteras rápido, esos segundos importan.
Lo que extraño de Next.js
1. Image optimization:
Astro tiene @astrojs/image pero no es tan pulido como next/image.
2. Middleware: Para cosas simples, los redirects de Astro funcionan. Para lógica compleja, extraño el middleware de Next.js.
3. Ecosistema: Muchas librerías asumen Next.js. Astro requiere más trabajo manual a veces.
Mi decisión final
Para este sitio, Astro fue la elección correcta:
- 100 en Lighthouse sin optimización
- Deploy en 30 segundos
- Escribo markdown, Astro lo renderiza
- Cero problemas de hidratación
Pero no reemplazaría Next.js en mis proyectos SaaS. Para dashboards interactivos, Next.js sigue siendo imbatible.
La lección
No existe “el mejor framework”. Existe el mejor framework para tu caso de uso.
Si tu sitio es 90% contenido y 10% interactividad, Astro te va a hacer muy feliz.
Si tu app es 90% interactividad y 10% contenido, Next.js es la mejor opción.
Para mi blog personal: Astro. Para mi producto SaaS: Next.js.
Ambos en mi stack, ambos con propósitos diferentes.
Recursos
Contenido Relacionado
Más experimentos de Development
