Astro vs Next.js: islas frente a Server Components | We.Inc
Astro entrega HTML estático con islas interactivas; Next.js crea apps React con Server Components. Compara los modos de salida, la interactividad y el hosting, y luego prueba tus necesidades.
Astro renderiza las páginas a HTML sin JavaScript en el cliente salvo que añadas una isla con una directiva client, lo que lo hace muy adecuado para sitios de contenido. Next.js es un framework de React en el que las páginas son Server Components por defecto y las partes interactivas se activan con 'use client', lo que encaja con productos tipo app con inicio de sesión y mucho estado.
Astro y Next.js comparados
Tema
Astro
Salida por defecto
HTML estático, prerenderizado en el build
React renderizado en el servidor; exportación estática opcional
Añade un adaptador y luego prerender = false u output: 'server'
Integrado al ejecutar next start
Partes de servidor diferidas
Islas de servidor server:defer
Renderizado de servidor enviado al cliente por streaming
Opciones de hosting
Cualquier hosting estático, o adaptadores para Node.js, Netlify, Vercel, Cloudflare
Servidor Node.js, Docker, exportación estática o adaptadores
Marca las necesidades que describen tu proyecto. Cada una se inclina hacia Astro o Next.js por un motivo concreto, y el recuento de abajo te da una recomendación de partida, no un veredicto final.
Selecciona cada afirmación que sea cierta para tu proyecto.
Lee el motivo que aparece bajo cada necesidad seleccionada.
Revisa el recuento y la recomendación al final.
Usa los ejemplos de código de más abajo para ver cómo cada framework añade una parte interactiva.
Los sitios de contenido con unos pocos widgets son donde Astro brilla. Cada página sigue siendo HTML simple salvo las islas que marques.
Elige client:visible para los widgets que quedan por debajo del pliegue. Astro espera a que la isla entre en pantalla antes de cargar su JavaScript.
En Next.js, lleva 'use client' lo más abajo que puedas. Marca el cuadro de búsqueda, no todo el layout, para mantener pequeños los bundles del cliente.
¿Ya tienes componentes de React? Ambos frameworks pueden usarlos. En Astro, instala la integración de React con npx astro add react.
Preguntas frecuentes
¿Puede Astro usar componentes de React?
Sí. Después de npx astro add react puedes importar un componente de React en una página .astro. Sin una directiva client solo se renderiza a HTML estático; añade client:load u otra directiva para hacerlo interactivo.
¿Astro es solo para sitios estáticos?
No. Con un adaptador de servidor instalado, cualquier página puede excluirse del prerenderizado con export const prerender = false, o puedes fijar output: 'server' para renderizar cada página por petición y prerenderizar solo las que elijas.
¿Las islas de Astro son lo mismo que los React Server Components?
Resuelven un problema parecido desde direcciones opuestas. Astro parte de cero JavaScript y tú añades islas interactivas. Next.js parte de React renderizado en el servidor y tú marcas las partes de cliente. Los React Server Components nunca envían su código al navegador.
¿Cuál es mejor para un blog?
Normalmente Astro, porque un blog es sobre todo texto e imágenes que no necesitan JavaScript. Next.js también maneja bien los blogs, y es la opción más fácil si el blog está dentro de una app React más grande.
¿Cuál es mejor para un panel o una app SaaS?
Normalmente Next.js. Las pantallas con sesión iniciada, formularios, datos en vivo y estado compartido en el cliente aprovechan los puntos fuertes de React, y los Route Handlers viven en el mismo proyecto.
Cómo funcionan las islas de Astro
Un componente de Astro tiene arriba un bloque de script que solo se ejecuta en el servidor, y debajo una plantilla. Nunca se renderiza en el cliente: el resultado es HTML, generado en el build o en cada petición.
Cuando una parte de la página necesita reaccionar a los clics, colocas un componente de React, Svelte, Vue u otro framework compatible y le das una directiva client. Solo esa isla carga JavaScript, y la directiva decide cuándo: de inmediato, cuando el navegador está inactivo, cuando entra en pantalla o cuando coincide una media query.
Cómo funcionan los Server Components de Next.js
En el App Router de Next.js, los layouts y las páginas son Server Components salvo que se indique lo contrario. Pueden leer bases de datos y secretos directamente, y su código no se envía al navegador.
Añadir 'use client' a un archivo marca una frontera. Ese archivo, sus imports y los componentes que renderiza van al bundle del cliente y se hidratan, así que ahí funcionan el estado, los efectos y los manejadores de eventos.
Cómo decidir
Si la mayoría de las páginas se leen más que se usan, empieza con Astro. Si la mayoría se usan más que se leen, o el equipo vive en React, empieza con Next.js. Los sitios mixtos suelen tener el sitio de marketing en Astro y la app en Next.js en un subdominio.
Añadir una parte interactiva en cada uno
Página de Astro con una isla de React
El encabezado y el párrafo se entregan como HTML simple. Solo el LikeButton carga JavaScript, y solo cuando entra en pantalla.
Página de Next.js con un Client Component
La página es un Server Component. El archivo con 'use client' es la única parte que se hidrata en el navegador.
Renderizado por petición en Astro
Salida de servidor con un adaptador de Node.js
Ejecuta primero npx astro add node. Con output en 'server', cada página se renderiza por petición salvo que exporte prerender = true.
La mayoría de las páginas son artículos, documentación o textos de marketing
Los componentes de Astro se renderizan a HTML sin JavaScript en el cliente, que es todo lo que necesita una página de lectura.
Queremos usar componentes de Svelte o Vue junto a React
Astro admite React, Preact, Svelte, Vue y SolidJS en la misma página.
La interactividad se limita a unos pocos widgets
Las directivas client cargan JavaScript solo para esas islas, y solo cuando hace falta.
Queremos alojarlo en un hosting de archivos estáticos simple
La salida de Astro es estática por defecto; la exportación estática de Next.js funciona, pero pierde las funciones que necesitan un servidor.
La mayoría de las pantallas están tras un inicio de sesión
Las pantallas con sesión y muchos datos encajan con el estado de React y con Server Components que obtienen los datos en el servidor.
Muchos componentes comparten estado en el cliente
Una app React con context providers y Client Components gestiona el estado compartido directamente.
Queremos endpoints de API en el mismo proyecto
Los Route Handlers viven junto a las páginas y se ejecutan siempre que el sitio funcione en su servidor Node.js.
Nuestro equipo ya lo construye todo en React
Next.js es React de arriba abajo, así que no hay un segundo modelo de componentes que aprender.
¿Cuál encaja con tu proyecto?
Necesidades del proyecto
Astro: {a}, Next.js: {n}
Selecciona las necesidades que se aplican a tu proyecto.
Inclínate por Astro.
Inclínate por Next.js.
Empate: cualquiera sirve, así que elige el que conozca tu equipo.