Astro vs Next.js: cuál elegir para un sitio de marketing o un producto en 2026

¿Cuál deberías elegir?

Elige Astro cuando la mayoría de las páginas se vean igual para todos los visitantes: un sitio de marketing, un blog, documentación, un sitio en varios idiomas. Elige Next.js cuando el proyecto sea sobre todo un producto con sesión iniciada, con paneles, editores, cuentas y pantallas que guardan estado en el navegador. La línea divisoria es cuánto del sitio se comporta como una aplicación, no cuántas páginas tiene.

Construimos con los dos, a través de nuestros servicios de desarrollo en Astro y de desarrollo en Next.js, y usamos ambos en producción: dardo.studio es un sitio en Astro, y los front ends de Hyper y de A medio tono son Next.js 16 sobre Cloudflare Workers. Cualquiera de los dos frameworks puede hacer el trabajo del otro. Lo que cambia es el punto de partida de cada uno y lo que cuesta alejarse de él. Los datos de abajo son de octubre de 2026.

Dos puntos de partida distintos

Astro parte del HTML. Las páginas, rutas y endpoints se prerenderizan en tiempo de compilación por defecto, y una ruta que necesita servidor se sale por su cuenta, con una línea de código y un adaptador. Los componentes se renderizan a HTML y su JavaScript se elimina, salvo que marques uno como isla de cliente que carga de inmediato, cuando el navegador está inactivo o cuando entra en pantalla al hacer scroll (documentación de Astro). Las islas se pueden escribir en React, Preact, Svelte, Vue o Solid, y las server islands permiten que un fragmento lento o personal, como el menú de la cuenta, se renderice aparte para no retrasar el resto de la página.

Next.js parte de una aplicación React. En el App Router, los layouts y las páginas son Server Components por defecto y todo lo interactivo es un Client Component, marcado con la directiva use client. En la primera visita el navegador recibe el HTML, luego el payload RSC que React usa para reconciliar los árboles del servidor y del cliente, y después el JavaScript que hidrata las partes interactivas (documentación de Next.js). Con Next.js 16.4, publicado el 6 de octubre de 2026, el equipo recomienda Cache Components para toda aplicación: los proyectos nuevos lo traen por defecto y será el predeterminado en Next.js 17. Una página puede entonces combinar una estructura prerenderizada, secciones en caché y secciones renderizadas en cada solicitud.

La diferencia práctica: en Astro, el JavaScript es algo que sumas, un componente a la vez. En Next.js, React y el router del cliente vienen con cada página, y el trabajo consiste en mantener tu propio código fuera del bundle. Una regla sorprende a muchos equipos: en cuanto un archivo se marca con use client, todo lo que importa también viaja al navegador.

Lo que medimos en nuestros propios sitios

El 14 de octubre de 2026 descargamos páginas de sitios que construimos y sumamos el JavaScript que cada una carga al llegar, antes de que el visitante haga clic en nada: el tamaño comprimido con gzip de cada archivo de script, sin contar el beacon de analítica de Cloudflare. Next.js puede precargar más a medida que los enlaces entran en pantalla; eso no lo contamos.

En toda la web, los promedios se separan más que nuestros dos sitios: nuestro informe de velocidad de plataformas web muestra cuántos sitios en Astro y en Next.js aprueban las Core Web Vitals con visitantes reales, y cuánto JavaScript envía cada uno, por país.

Los 43 KB de dardo.studio cubren nuestros propios scripts pequeños para el tema, los menús y el panel de preferencias de analítica, una librería de transiciones entre páginas y la librería web-vitals de Google para nuestras mediciones de campo; ningún framework de UI llega al navegador. La librería de PostHog, unos 96 KB más, arranca cuando la página ya cargó, y no arranca para quienes rechazan la analítica.

El artículo de A medio tono está prerenderizado y se sirve desde la caché de Cloudflare, así que el servidor casi no trabaja; el peso está todo en el navegador. Unos 121 KB corresponden a los dos archivos que contienen React DOM y el runtime de cliente de Next.js; el resto son los componentes y librerías propios del sitio. El payload RSC es una copia serializada de la página renderizada que React usa en el navegador, muchas veces más grande que los cerca de 14.000 caracteres de texto que realmente lee una persona.

Esto no es un benchmark. Los sitios tienen funciones distintas, y el afinador y el metrónomo de A medio tono son herramientas interactivas donde una base de código en React se justifica. Muestra dónde pone el peso cada framework por defecto: Next.js compra navegación del lado del cliente y una sola base de código en React, y una página hecha sobre todo de texto no necesita ninguna de las dos cosas. En Hyper, el archivo más grande, unos 167 KB, es three.js mismo; en una página 3D como esa, la librería de gráficos pesa más que el framework. Nuestro trabajo de optimización de velocidad web parte de mediciones como estas, no de la reputación del framework.

Colecciones de contenido o consulta de datos

Astro trata el contenido como datos que carga durante la compilación. Las colecciones de contenido le dan a cada tipo de contenido un esquema, y una entrada que lo incumple detiene la compilación con un error en lugar de llegar a un visitante. Los loaders leen Markdown, JSON o YAML del repositorio, o traen datos de un CMS, una base de datos o una API. Astro recomienda colecciones en tiempo de compilación siempre que se pueda y reserva las colecciones en vivo para datos que deben estar al día en cada solicitud.

El precio de ese modelo es una recompilación. En dardo.studio un artículo sale en vivo de dos a tres minutos después de que un editor lo publica, porque el sitio se recompila desde el CMS. Eso sirve para artículos y páginas de servicios; los niveles de inventario o los precios que cambian durante el día pertenecen a rutas bajo demanda.

Next.js consulta los datos dentro de los Server Components, desde donde estén, y el caché es una decisión escrita en el código. Con Cache Components, use cache marca una función o un componente como almacenable en caché, cacheLife define cuánto tiempo se mantiene fresco y cacheTag lo etiqueta para poder refrescarlo cuando cambia el contenido (documentación de Next.js). Dos detalles de esa documentación importan para los sitios de marketing:

• Las cachés pertenecen a un despliegue. Los resultados en caché no pasan a un despliegue nuevo, así que todo lo que se guarda en caché durante las solicitudes se calcula de nuevo después de cada lanzamiento.
• Algunos rastreadores reciben un renderizado en la solicitud. Cuando los metadatos de una página son dinámicos, Next.js detecta ciertos bots por su user agent y renderiza la página en el momento para ellos; una fuente de datos que solo funciona durante la compilación puede enviarles un error 500.

El CMS detrás de cualquiera de los dos frameworks marca el día a día de los editores más que el framework; nuestro servicio de desarrollo de CMS headless y nuestra comparación de Sanity, Contentful y Payload cubren esa elección.

Alojamiento y costo de operación

Un sitio Astro totalmente prerenderizado es una carpeta de archivos que cualquier servidor estático puede servir. En Cloudflare Workers, las solicitudes a recursos estáticos son gratuitas e ilimitadas (documentación de Cloudflare), así que el alojamiento de un sitio de marketing puede costar cero. Las rutas renderizadas bajo demanda necesitan un adaptador; Astro mantiene adaptadores oficiales para Cloudflare, Netlify, Vercel y Node. dardo.studio es estático en Workers, salvo la vista previa de borradores del CMS, que un Worker renderiza bajo demanda; Superame, un ranking público con pagos verificados que construimos, corre Astro 7 en modo servidor en Vercel con una base de datos Postgres.

Next.js admite todas sus funciones cuando corre como servidor Node.js o en un contenedor Docker; una exportación estática corre en cualquier parte, pero pierde todo lo que necesita servidor (documentación de Next.js). A octubre de 2026, los adaptadores verificados, que pasan toda la suite de pruebas de compatibilidad de Next.js, son Vercel y Bun. Cloudflare y Netlify están construyendo adaptadores verificados y mientras tanto ofrecen sus propias integraciones, cuyo soporte de funciones puede variar, así que revisa cada función de la que dependas.

Nuestros dos sitios en Next.js corren en Cloudflare Workers a través de OpenNext; A medio tono se pasó allí desde Vercel el 30 de septiembre de 2026. El plan de pago de Workers parte de USD 5 al mes con 10 millones de solicitudes incluidas y sin cobro por ancho de banda. Dondequiera que corra una app de Next.js, una ruta renderizada en cada solicitud cuesta cómputo en cada visita, y por eso la 16.4 añadió ensureStatic, un ajuste que hace fallar la compilación cuando un componente dinámico se cuela en una página que debía seguir siendo estática. Nuestra página de desarrollo en Next.js desglosa en detalle las facturas de Vercel y de Cloudflare.

Actualizaciones y ventanas de soporte

Next.js lanza una versión mayor nueva cada octubre desde 2021 y publica una política de soporte por escrito: la versión mayor actual está en Active LTS, y la anterior recibe correcciones críticas y actualizaciones de seguridad durante dos años desde su primer lanzamiento. Astro avanza más rápido y da menos soporte: Astro 7 salió el 22 de junio de 2026, unos tres meses después de Astro 6, y el equipo central ofrece correcciones de seguridad solo para una versión mayor anterior, sin fecha de fin publicada (documentación de Astro).

Un sitio Astro estático que se salta una actualización sigue sirviendo los mismos archivos, y no se ejecuta código de servidor cuando llega un visitante. Una app de Next.js ejecuta código de servidor en cada solicitud que no sale de la caché, así que sus lanzamientos de seguridad se deben aplicar rápido. En diciembre de 2025, una falla en los React Server Components, con calificación CVSS 10.0, dejó las apps de Next.js 15 y 16 con App Router expuestas a ejecución remota de código; no había solución provisional, solo actualizar (Next.js). Nombra a un responsable de las actualizaciones; nuestros planes de mantenimiento web las incluyen.

Ecosistema y el equipo que tienes

Next.js tiene el ecosistema más grande por un margen amplio. En la semana del 6 al 12 de octubre de 2026, npm registró cerca de 67,5 millones de descargas de next y 7,3 millones de astro (npm), una proporción de nueve a uno, y unos 188 millones de react mismo. Las descargas incluyen compilaciones automáticas, así que tómalas como una medida aproximada del tamaño del ecosistema. Next.js es React de arriba abajo, así que toda librería de React y todo desarrollador que sepa React están a su disposición.

Astro le pide menos a un equipo. Sus componentes se parecen mucho al HTML, su documentación dice que cualquiera que sepa HTML puede escribir uno, y los componentes de React siguen funcionando dentro de él como islas. Next.js le pide al equipo entender dónde corre cada pieza de código: qué componentes son de servidor o de cliente, qué props pueden cruzar entre ellos y qué regla de caché aplica a cada lectura. Ese conocimiento rinde cuando construyes un producto. Cuando el trabajo es publicar páginas, es carga extra.

Una tabla para decidir

Cuando la respuesta son los dos, o ninguno

Una empresa de SaaS también puede usar los dos: el sitio de marketing en Astro en www y el producto en Next.js en app, cada uno desplegado con su propio calendario. Una sola base de código en Next.js funciona mejor cuando un solo equipo pequeño es dueño de todo y quiere un único conjunto de componentes. Diseñar el lado de marketing de esa división es nuestro servicio de diseño web para SaaS, y definir el alcance del producto es desarrollo de software a medida.

A veces la respuesta es ninguno. Si tu equipo de marketing necesita construir y reorganizar páginas visualmente, cada semana, sin pedirle nada a un desarrollador, un framework con un CMS headless le va a parecer lento por rápidas que carguen las páginas. Nuestra comparación de Webflow y Framer cubre ese camino.

Cómo decidimos en un proyecto

Listamos cada ruta y la marcamos como igual para todos, cambiante según cuándo se publica el contenido, o distinta para cada visitante. Si el último grupo está vacío o tiene un puñado de rutas, como una vista previa de borradores, una página de búsqueda o el retorno de un pago, construimos en Astro. Si el producto con sesión iniciada es el motivo del proyecto, construimos en Next.js y mantenemos estáticas las rutas de marketing desde el primer commit.

Si vas a mover un sitio existente, nuestra guía para migrar de WordPress a Astro cubre la migración más común, y nuestro servicio de desarrollo web cubre los proyectos donde el framework sigue abierto. Si quieres una segunda opinión, envíanos tu lista de rutas y te diremos qué framework elegiríamos y por qué.