Astro vs Next.js vs TanStack Start: ¿Cuál gana en 2026?

Deja de preguntar “qué framework es mejor”. Empieza a preguntar “qué estoy construyendo”.

El espacio de los meta-frameworks en 2026 tiene tres contendientes claros: Astro — centrado en el contenido, cero JS por defecto, ahora respaldado por Cloudflare. Next.js — el caballo de batalla full-stack de React, RSC primero, optimizado para Vercel. TanStack Start — el nuevo retador, enfocado en el control del desarrollador, tipado seguro en todo, impulsado por Vite.

Todas las comparaciones existentes cubren dos de ellos. Este es el primer artículo que pone a los tres lado a lado con benchmarks reales, datos de coste y un marco de decisión. Sin apologetía de fan. Sin ganador falso.

El estado de los meta-frameworks en 2026

La encuesta State of JS 2025 dibujó un panorama claro. Astro lidera la satisfacción entre meta-frameworks con una ventaja de 39 puntos sobre Next.js. Next.js sigue dominando el uso con un 60–70% de adopción, pero la satisfacción está en declive. TanStack Start apareció como opción escrita a mano con aproximadamente un 4% — nada mal para un framework que aún estaba en beta durante la encuesta — y ganó el premio “Revelación del año” en los Open Source Awards 2026.

Tres cosas definen el momento actual:

Qué cambió desde 2025

Cloudflare adquirió The Astro Technology Company el 16 de enero de 2026. Astro sigue con licencia MIT y es open source, pero ahora cuenta con respaldo corporativo de bolsillos profundos e infraestructura edge. Es la misma dinámica que Vercel tiene con Next.js, pero en el lado contrario.

Next.js 16 se lanzó en octubre de 2025 con Turbopack como bundler por defecto, Cache Components ("use cache"), soporte del React Compiler y un nuevo proxy.ts que reemplaza a middleware.ts. Las velocidades de build mejoraron 2–5x respecto a la toolchain anterior basada en Webpack.

TanStack Start alcanzó la RC de v1 en septiembre de 2025. Funciona con Vite, es type-safe por defecto y se despliega en cualquier sitio vía Nitro. El equipo de Inngest reportó una reducción del 83% en los tiempos de desarrollo local tras migrar desde Next.js.

Tres frameworks, tres filosofías

La elección no va de funcionalidades. Va de lo que cada framework cree que es la web. Astro apuesta a que la web es contenido — optimiza para entrega estática. Next.js apuesta a que la web son aplicaciones — optimiza para renderizado React en servidor. TanStack Start apuesta a que la web son datos — optimiza para comunicación cliente-servidor type-safe.

Son apuestas fundamentalmente distintas, y los compromisos se derivan de ellas.

Astro — contenido primero, cero JS por defecto

Astro usa una arquitectura de islas: las páginas se sirven como HTML estático por defecto, y los componentes interactivos solo se hidratan donde los marcas explícitamente. Un blog típico de Astro envía 0KB de JavaScript al navegador. Cero.

El framework también es agnóstico respecto a frameworks. Puedes usar React, Vue, Svelte, Solid, Preact o Lit — incluso mezclarlos en la misma página. Las Content Collections ofrecen gestión de contenido estructurada y type-safe con esquemas Zod (Zod 4 en Astro 6).

La beta de Astro 6 (enero de 2026) trae mejoras significativas: la Vite Environment API para paridad dev/prod, Live Content Collections para datos dinámicos, soporte CSP nativo y builds 5x más rápidos que Astro 5.

Entre sus usuarios destacan Microsoft, Cloudflare, Digital Ocean, Adobe, Porsche, IKEA, OpenAI y Google Chrome. Puedes desplegar un blog de Astro en Cloudflare en minutos, y la capa de base de datos de Astro es sorprendentemente capaz — mira cómo funciona Astro DB con Bunny Database.

# Create a new Astro project
npm create astro@latest

# Build
npm run build

---
import LikeButton from '../components/LikeButton.tsx';
import Comments from '../components/Comments.vue';
---
<article>
  <h1>My Blog Post</h1>
  <p>Static content here — zero JS shipped for this part.</p>
  <LikeButton client:load initialLikes={42} />
  <Comments client:visible postId="123" />
</article>

// astro.config.mjs
import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';
import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  output: 'static',
  adapter: cloudflare(),
  integrations: [react(), tailwind()],
  security: {
    csp: true,
  },
});

Next.js — el estándar full-stack de React

Next.js es el gorila de 800 libras. Con más de 140K estrellas en GitHub y un 60–70% de adopción entre meta-frameworks, es la opción por defecto para equipos React. El App Router, los React Server Components y el SSR con streaming están diseñados para que el desarrollo full-stack en React se sienta cohesionado.

Next.js 16 llegó en octubre de 2025 con mejoras importantes. Turbopack es ahora el bundler por defecto (builds 2–5x más rápidos). Los Cache Components te permiten optar por caché con directivas "use cache" en lugar de depender de las antiguas capas de caché implícitas. El soporte del React Compiler implica memoización automática en muchos casos. Un nuevo proxy.ts reemplaza el confuso patrón de middleware.ts.

Pero los puntos de dolor son reales. Las fronteras de los RSC siguen siendo la fuente de confusión nº 1 — entender dónde se ejecuta el código (¿servidor? ¿cliente? ¿ambos?) lleva semanas interiorizarlo. Los patrones del App Router (layouts, loading.tsx, error.tsx, rutas paralelas, rutas interceptadas) son potentes pero densos. Y la optimización para Vercel significa que el self-hosting siempre es de segunda clase.

// app/blog/[slug]/page.tsx
export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

Configuración de Cache Components en Next.js 16:

// next.config.ts
const nextConfig = {
  cacheComponents: true,
};
export default nextConfig;

TanStack Start — control del desarrollador sobre convención

TanStack Start adopta un enfoque distinto: cliente primero con capacidades de servidor explícitas. En lugar de renderizar en servidor por defecto y dejarte optar por comportamiento de cliente, hace lo contrario. Empiezas con una app React renderizada en cliente y añades funciones de servidor donde las necesites.

Las funcionalidades clave son diferenciadores reales. El enrutado type-safe basado en archivos detecta errores de parámetros en tiempo de compilación. createServerFn hace explícitas las fronteras de servidor — nada de adivinar dónde se ejecuta el código. Los loaders isomórficos funcionan con TanStack Query para un fetching de datos eficiente. La validación de search params con Zod evita errores en runtime por URLs mal formadas.

El despliegue es agnóstico de plataforma: Vercel, Netlify, Railway, Node pelado, Docker, Cloudflare Workers vía presets de Nitro. Sin vendor lock-in. Incluso puedes construir una app de tareas con TanStack Start y Drizzle para verlo en acción.

import { createServerFn } from '@tanstack/react-start';
import { z } from 'zod';

export const createPost = createServerFn({ method: 'POST' })
  .validator(z.object({ title: z.string().min(1) }))
  .middleware([authMiddleware])
  .handler(async ({ data, context }) => {
    return db.posts.create({ title: data.title });
  });

Ruta type-safe con loader:

export const Route = createFileRoute('/dashboard/')({
  loader: async () => {
    const data = await fetchDashboardData();
    return data;
  },
  component: DashboardPage,
});

Rendimiento y tamaño del bundle

Cuánto JavaScript envía cada framework por defecto tiene consecuencias reales. Cada kilobyte afecta al Time to Interactive, a las Core Web Vitals y, en última instancia, a tu posicionamiento SEO y a la retención de usuarios.

Tamaños de bundle por defecto comparados

Astro envía 0KB por defecto. Cero. A menos que añadas islas interactivas explícitamente, el navegador recibe HTML y CSS puros. Para una página de blog típica, eso es todo.

Next.js envía su runtime de React más el JavaScript de la página. Incluso con los React Server Components reduciendo lo que llega al cliente, una página de blog sencilla envía aproximadamente 85–95KB en gzip. Esa es la base — sube a partir de ahí conforme añades componentes de cliente.

TanStack Start queda en un punto intermedio. La respuesta inicial renderizada en servidor es rápida (SSR), luego el cliente toma el control como single-page app. El tamaño del bundle depende de la complejidad de tu app, pero el runtime central es más ligero que el de Next.js porque no hay maquinaria RSC que enviar.

Gráfico de barras comparando los tamaños de bundle por defecto: Astro 0KB, Next.js 95KB, TanStack Start intermedio

Benchmarks de velocidad de build

Astro 6 procesa 100 posts en markdown en unos 200ms — una mejora de 5x sobre los 1000ms de Astro 5. Para sitios de contenido grandes, esto transforma los pipelines de CI/CD. El benchmark de Astro 7 en un sitio de 743 páginas muestra ganancias aún más dramáticas con el compilador en Rust.

Next.js 16 con Turbopack es 2–5x más rápido que los antiguos builds con Webpack. Es una mejora enorme, aunque Turbopack sigue por detrás de Vite en velocidad de HMR.

TanStack Start usa Vite de forma nativa, lo que significa HMR casi instantáneo durante el desarrollo. Los tiempos de build en producción son competitivos con Turbopack.

Core Web Vitals en la práctica

Para un sitio de contenido/blog, los números son contundentes:

Estos números son para sitios de contenido sencillos. Conforme crece el número de islas interactivas en Astro, o aumentan los componentes de cliente en los otros, la brecha se estrecha. Pero la ventaja de base es real.

Puedes desplegar Astro en un VPS y ver estas puntuaciones inmediatamente en producción.

Experiencia de desarrollo y curva de aprendizaje

Los números de rendimiento son medibles. La DX se acumula durante meses de desarrollo diario. El mejor framework sobre el papel no es el mejor si tu equipo pelea con él cada sprint.

El modelo mental de Astro

Astro tiene el modelo mental más simple de los tres: HTML + CSS + islas. El formato de archivo .astro usa frontmatter para la lógica y una sintaxis de plantilla tipo HTML para el marcado. Si sabes HTML, puedes leer un archivo de Astro.

La independencia de frameworks significa que tu equipo no está atado a React. Un desarrollador de Vue puede contribuir componentes de Svelte al mismo proyecto de Astro. Las Content Collections te dan contenido type-safe con validación de esquemas — la mejor DX nativa para gestión de contenido de cualquier framework.

La advertencia: cuando necesitas mucha interactividad, el modelo de islas añade sobrecarga de coordinación. Las islas no pueden compartir estado fácilmente. Acabas gestionando la comunicación entre islas tú mismo, que es donde frameworks como Next.js y TanStack Start tienen ventajas naturales.

Si estás aprendiendo Astro, echa un vistazo a los mejores cursos de Astro.js para rutas de aprendizaje estructuradas.

El impuesto de complejidad de Next.js

Next.js paga su potencia con complejidad. El modelo mental de los RSC — entender la frontera servidor/cliente — es la fuente de confusión nº 1 tanto para desarrolladores nuevos como experimentados. Los patrones del App Router (layouts, loading.tsx, error.tsx, rutas paralelas, rutas interceptadas) son potentes pero densos.

El caching ha sido históricamente el peor punto de dolor. Múltiples cachés implícitas con reglas de invalidación poco intuitivas. Next.js 16 mejora esto significativamente con los Cache Components y APIs más claras como updateTag y revalidateTag, pero la curva de aprendizaje sigue siendo pronunciada.

El compromiso: una vez que lo aprendes, la profundidad del ecosistema es difícil de superar. Más tutoriales, más respuestas en Stack Overflow, más integraciones de terceros y el mayor pool de contratación de cualquier meta-framework.

La seguridad de tipos de TanStack Start

TanStack Start es lo más cercano a “React puro” con capacidades de servidor añadidas. No hay un nuevo modelo mental que aprender — son componentes React, hooks de React y TanStack Query.

El verdadero diferenciador es el enrutado type-safe. La validación de parámetros en tiempo de compilación detecta bugs de URLs antes de que lleguen a producción. createServerFn hace explícitas las fronteras de servidor: defines una función, la marcas como función de servidor, y los tipos te dicen exactamente qué está disponible. Sin fronteras implícitas, sin adivinanzas.

El compromiso: ecosistema más pequeño, menos tutoriales, configuración inicial más empinada si eres nuevo en TanStack Query. Ideal para equipos senior cómodos con primitivas más finas pero bien diseñadas.

---
// Astro: data fetching in frontmatter
const posts = await fetch('https://api.example.com/posts')
  .then(r => r.json());
---
<ul>
  {posts.map(post => <li>{post.title}</li>)}
</ul>

// Next.js: Server Component — async by default
export default async function PostsPage() {
  const posts = await fetch('https://api.example.com/posts')
    .then(r => r.json());
  return (
    <ul>
      {posts.map(post => <li>{post.title}</li>)}
    </ul>
  );
}

// TanStack Start: route loader
export const Route = createFileRoute('/posts/')({
  loader: async () => {
    const posts = await fetch('https://api.example.com/posts')
      .then(r => r.json());
    return posts;
  },
  component: PostsPage,
});

function PostsPage() {
  const posts = Route.useLoaderData();
  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

Salud del ecosistema y la comunidad

El tamaño del ecosistema importa para la longevidad. La satisfacción importa para la felicidad diaria. Así se comparan los tres:

Análisis de costes: hosting a escala

Esta es la sección que la mayoría de comparaciones de frameworks se saltan. Los costes de hosting son el factor de decisión oculto — eliges un framework, construyes tu app, y luego descubres que tu factura de hosting con 50K visitantes es de $500 al mes.

Sitios de contenido estático (10K–100K visitantes)

Los despliegues estáticos de Astro son gratis a cualquier escala. Cloudflare Pages, Netlify, GitHub Pages — todos ofrecen planes gratuitos que manejan más de 100K visitantes mensuales sin despeinarse. El HTML pre-renderizado es lo más barato de servir en internet.

Next.js en Vercel Hobby ($0) funciona para sitios pequeños, pero los límites de ancho de banda y funciones serverless se alcanzan rápido. Cuando superas el plan gratuito, Pro empieza en $20/mes por usuario más $20 de crédito de uso. Para un blog sencillo, es excesivo.

TanStack Start puede ser tan barato como Astro si tu sitio es mayormente estático. Si necesitas SSR, se aplica el hosting Node estándar — $4–20/mes en cualquier VPS.

Apps full-stack a escala

Aquí es donde se pone caro. Datos reales de precios de Vercel de múltiples fuentes:

Consulta los precios de Hetzner Cloud para datos concretos de coste de VPS.

Self-hosting y Docker

Los tres frameworks soportan Docker. La diferencia está en cuánto se resiste el framework.

Astro: Los archivos estáticos van a cualquier parte — un CDN, un VPS de $4 con Nginx, S3. El SSR requiere un adaptador de Node pero es sencillo.

Next.js: Requiere un servidor Node. Dockerfile a partir de next start. Funciona en cualquier VPS, pero algunas funcionalidades (optimización de imágenes, ISR, middleware) se comportan de forma distinta fuera de Vercel.

TanStack Start: Nitro genera Node estándar. Amigable con Docker por diseño. Sin comportamientos específicos de plataforma de los que preocuparse.

# Generic Node Dockerfile — works for all three
FROM node:22-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["node", "dist/server.js"]

El punto medio de las PaaS: herramientas como Coolify, Railway y Render ofrecen la comodidad de Vercel sin su precio. Si quieres despliegues de un clic en tu propia infraestructura, mira Coolify como alternativa autoalojada.

El factor Cloudflare: qué significa la adquisición de Astro

Cloudflare adquirió The Astro Technology Company el 16 de enero de 2026. Astro sigue con licencia MIT y open source — eso está confirmado en el anuncio. Pero las implicaciones merecen examinarse.

El incentivo de Cloudflare es claro: hacer de Astro el mejor framework en Cloudflare Pages y Workers. Refleja la relación de Vercel con Next.js. Nos dirigimos hacia un duopolio: optimizado para Vercel contra optimizado para Cloudflare.

El riesgo: ¿se volverá Astro Cloudflare-first como Next.js es Vercel-first? ¿Crearán las funcionalidades específicas de plataforma un lock-in blando?

La tranquilidad: la arquitectura de islas de Astro y su filosofía agnóstica de frameworks son inherentemente neutrales respecto a la plataforma. A diferencia de Next.js, que está profundamente ligado a la infraestructura de Vercel (edge functions, optimización de imágenes, ISR), el enfoque static-first de Astro significa que el resultado son solo archivos. Los archivos van a cualquier parte.

La inversión de Cloudflare probablemente signifique desarrollo más rápido, mejor despliegue en edge, más recursos e integración más estrecha con Workers. Para la comunidad de Astro, es un positivo neto — siempre que sigas desplegando también en plataformas ajenas a Cloudflare.

Puedes desplegar un blog de Astro en Cloudflare hoy mismo para ver la integración en la práctica.

¿Está TanStack Start listo para producción?

El elefante en la habitación. TanStack Start lleva en RC de v1 desde septiembre de 2025 — aún no es “estable” según los estándares de semver. Entonces, ¿puedes lanzar productos reales con él?

Sí, con matices. Múltiples apps SaaS en producción funcionan hoy con TanStack Start. MakerKit distribuye su starter SaaS sobre él. Appwrite documentó su migración desde Next.js. El premio “Revelación del año” en los Open Source Awards 2026 valida la confianza de la comunidad más allá del hype.

Consideraciones clave:

Opinión honesta: si eres una startup que lanza rápido con un equipo senior cómodo con las primitivas de TanStack, TanStack Start es viable hoy. Si necesitas garantías de contratación empresarial, un ecosistema masivo de plugins, o tu equipo es mayormente junior, espera 6–12 meses a que el ecosistema madure.

Cuándo elegir cada framework

No hay un ganador universal. La elección correcta depende de lo que construyes, quién lo construye y dónde se ejecuta.

Diagrama de flujo para elegir entre Astro, Next.js y TanStack Start según el tipo de proyecto

Elige Astro cuando

Construyes sitios de contenido: blogs, documentación, páginas de marketing, portfolios. El rendimiento y las Core Web Vitals no son negociables. Quieres JavaScript mínimo. Tu equipo usa varios frameworks (React + Vue). El presupuesto es ajustado — el hosting estático es gratis a cualquier escala. Quieres el modelo mental más simple con la curva de aprendizaje más baja.

Elige Next.js cuando

Construyes aplicaciones web complejas: productos SaaS, plataformas de e-commerce, dashboards. Necesitas React Server Components, streaming, ISR. Tu equipo es solo de React y valora la profundidad del ecosistema. Desplegar en Vercel es aceptable o preferible. Necesitas el mayor pool de contratación para escalar tu equipo de ingeniería.

Elige TanStack Start cuando

Construyes aplicaciones con estado de cliente complejo. El modelo mental de los RSC genera fricción en tu equipo. El enrutado type-safe es una prioridad. Quieres flexibilidad de desplegar en cualquier sitio sin vendor lock-in. Tu equipo tiene ingenieros senior cómodos con primitivas más finas pero bien diseñadas. Ya estás invertido en el ecosistema de TanStack Query/Router.

Consideraciones de migración

¿Y si eliges mal? Los costes de cambio son reales pero manejables.

De Astro a Next.js: esfuerzo moderado. Reescribe las plantillas .astro como componentes React, adopta el modelo RSC, mueve la lógica de contenido estático a Server Components.

De Next.js a Astro: esfuerzo moderado. Elimina la lógica de servidor, mueve la interactividad a islas, convierte las páginas del App Router a páginas de Astro. Los sitios con mucho contenido migran más fácil que los que son mucha app.

De Next.js a TanStack Start: menor esfuerzo. Ambos son React, pero los patrones de enrutado y los enfoques de funciones de servidor difieren. Reescribirás las definiciones de rutas y reemplazarás los patrones RSC con loaders + funciones de servidor.

De TanStack Start a Next.js: esfuerzo moderado. Pierdes el enrutado type-safe, adoptas los patrones RSC, reestructuras el fetching de datos alrededor de Server Components.

FAQ

Veredicto

No hay un único ganador. Hay tres frameworks fuertes para tres apuestas distintas sobre la web.

Astro gana para sitios de contenido. Cero JS por defecto, las mejores Core Web Vitals, hosting gratis a cualquier escala y ahora respaldo de Cloudflare. Si estás construyendo un blog, un sitio de documentación o una página de marketing, es la elección obvia.

Next.js gana para aplicaciones React complejas. La profundidad del ecosistema, el pool de contratación y el modelo RSC no tienen rival para equipos que construyen productos SaaS, plataformas de e-commerce o dashboards empresariales. Acepta el impuesto de optimización para Vercel y la curva de aprendizaje.

TanStack Start gana en control para el desarrollador. Enrutado type-safe, fronteras de servidor explícitas, flexibilidad de desplegar en cualquier parte. Ideal para equipos senior que quieren primitivas finas y bien diseñadas sin vendor lock-in. Espera a que el ecosistema madure si tu equipo necesita barandillas.

El espacio de los meta-frameworks está más sano que en años. La competencia real está impulsando mejoras reales en los tres. Los desarrolladores ahora tienen opciones genuinas.