React vs Vue vs Svelte vs Astro vs Next.js, con la misma app
Comparativa de frameworks frontend
React vs Vue vs Svelte vs Astro vs Next.js: la misma app, medida | We.Inc
React, Vue, Svelte, Astro y Next.js comparados con la misma app de tareas en cada uno, tamaños de JavaScript medidos, una tabla de decisión por tipo de proyecto, notas sobre la curva de aprendizaje y un apartado sobre Vite frente a webpack.
Elige según el proyecto, no según la popularidad. Astro encaja con sitios de contenido porque las páginas se sirven como HTML con poco o ningún JavaScript. Next.js, construido sobre React, encaja con apps web completas. Vue es el más fácil de aprender y Svelte el que envía menos código. Hicimos la misma app de tareas en cada uno: Svelte envió 13.8 KB con gzip, Vue 25.8 KB y React 68 KB.
En una línea cada uno
Herramienta
Su punto fuerte
React
Apps, con el ecosistema más grande
Apps React completas con renderizado en servidor
Vue
Apps accesibles para empezar, con plantillas
Svelte
Bundles pequeños, poco código repetitivo
Astro
Sitios de contenido que envían poco JavaScript
Opiniones hay muchas; mediciones de la misma app, no. Escribimos una pequeña app de tareas en React, Vue, Svelte y JavaScript puro, compilamos cada una con Vite, la probamos a mano en un navegador y medimos lo que envía. Astro y Next.js se muestran con el mismo componente integrado.
Busca tu tipo de proyecto en la tabla de decisión.
Consulta la tabla de tamaños si importa el peso de la página, por ejemplo para visitantes en móvil.
Lee la misma app en cada sintaxis y mira cuál te resulta más natural.
Piensa en quién la va a mantener y qué librerías necesitas.
En un sitio de marketing, el framework importa menos que las imágenes, las fuentes y los scripts de terceros.
El coste del runtime de React se paga una sola vez; en una app más grande la diferencia se reduce a medida que crece tu propio código.
Prefiere el meta-framework oficial (Next.js, Nuxt, SvelteKit) a montar tú mismo el enrutado y el renderizado en servidor.
Elige lo que tu equipo ya conoce salvo que haya un motivo claro para cambiar.
Preguntas frecuentes
¿Next.js es lo mismo que React?
No. React es la librería de UI; Next.js es un framework construido sobre React que añade enrutado, renderizado en servidor, Server Components, carga de datos y una configuración de build. Dentro de Next.js escribes componentes React.
¿Astro o Next.js para una web?
Para sitios centrados en contenido, como páginas de marketing, blogs y documentación, Astro suele enviar menos JavaScript y es más sencillo. Para sitios tipo app con inicio de sesión, dashboards y mucha interacción, Next.js encaja mejor.
¿Vue es más fácil que React?
Mucha gente lo encuentra más fácil para empezar, porque las plantillas parecen HTML y la reactividad no exige actualizaciones inmutables. React te pide aprender antes JSX y las reglas de los hooks, pero tiene más librerías y más ofertas de empleo.
¿Por qué el bundle de Svelte es tan pequeño?
Svelte compila los componentes en código simple de actualización del DOM en tiempo de build, así que envía un runtime pequeño en lugar de un motor de renderizado genérico.
¿Uso Vite o webpack?
Para un proyecto nuevo, Vite: arranca rápido y necesita poca configuración. webpack sigue teniendo sentido en proyectos existentes que dependen de sus plugins.
La curva de aprendizaje, con sinceridad
Vue y Svelte son los que más se parecen a HTML, CSS y JavaScript simples, así que los principiantes arrancan rápido. React necesita JSX, hooks y la costumbre de hacer actualizaciones inmutables. Astro es fácil para contenido, pero te obliga a entender las islas en cuanto añades interacción. Next.js suma las fronteras entre servidor y cliente encima de React, que es el escalón más empinado de los cinco.
Alojamiento
La salida estática de Astro, de las apps con Vite o de la exportación estática de Next.js puede ir en cualquier hosting estático o CDN. El renderizado en servidor necesita un hosting que ejecute Node o una plataforma con funciones serverless; comprueba qué admite tu hosting antes de elegir funciones de servidor.
Lo que envía cada uno
Compilado con Vite en modo producción; cada build se probó en un navegador. Astro y Next.js no formaron parte de esta medición.
Medido: la misma app de tareas, JavaScript total enviado
Configuración
Minificado
Con gzip
JavaScript puro
1.4 KB
0.7 KB
Svelte 5
35.2 KB
13.8 KB
Vue 3
66.4 KB
25.8 KB
React 19 (con react-dom)
220.1 KB
68.0 KB
Cuál elegir
Tabla de decisión por tipo de proyecto
Proyecto
Buena elección
Por qué
Sitio de marketing, blog, documentación
Astro
Las páginas se envían como HTML sin JavaScript salvo que alguna parte lo necesite
App web con inicio de sesión y dashboards
Next.js o React Router (React)
Gran ecosistema, renderizado en servidor y carga de datos integrados
App en la que el equipo prefiere plantillas
Vue con Nuxt
Curva de aprendizaje suave, componentes de un solo archivo
Widgets pequeños y rápidos o una app ligera
Svelte con SvelteKit
La salida del compilador es pequeña; poco código repetitivo
Unos pocos elementos interactivos en un sitio existente
JavaScript puro o una isla pequeña
Ningún coste de framework
Contratar a muchos desarrolladores rápido
React
La mayor reserva de personas y librerías
Cómo se comparan
De un vistazo
React
Vue
Svelte
Astro
Qué es
Librería de UI
Framework de UI
Compilador + framework
Framework para sitios de contenido
Framework de React
Los componentes se escriben como
Funciones JSX
Archivo único .vue
Archivo único .svelte
.astro + cualquier librería de UI
React (JSX)
Reactividad
Estado + re-render
Proxies (ref, reactive)
Runes compiladas ($state)
Por isla
React
Renderizado en servidor
Mediante un framework
Mediante Nuxt
Mediante SvelteKit
Integrado (estático o servidor)
Integrado
Licencia
MIT
MIT
MIT
MIT
MIT
La misma app, de cinco formas
React
El estado vive en hooks; cada cambio vuelve a ejecutar el componente y React actualiza las diferencias en el DOM. Las actualizaciones deben crear arrays y objetos nuevos.
Vue
Script, plantilla y (opcionalmente) estilos en un solo archivo. v-model enlaza los inputs en ambos sentidos y las refs son reactivas, así que basta con hacer push al array.
Svelte 5
Las runes ($state, $derived) marcan los valores reactivos, y el compilador convierte el componente en actualizaciones directas del DOM, por eso su runtime es pequeño.
JavaScript puro
La referencia base. Sirve para un widget pequeño, pero escribes tú las actualizaciones del DOM y las mantienes sincronizadas con los datos a mano.
Astro: la misma app como isla
Astro renderiza la página a HTML y solo hidrata los componentes que llevan una directiva client. Aquí la app de tareas en Svelte carga su JavaScript cuando entra en pantalla al hacer scroll; el resto de la página no envía nada.
Next.js: dónde va el mismo componente
En el App Router la página es un Server Component, así que la lista de tareas interactiva va en su propio archivo marcado con "use client". La página que la rodea no envía JavaScript de componentes propio.
Apartado: Vite frente a webpack
Vite frente a webpack
Vite
Servidor de desarrollo
Sirve el código fuente como módulos ES nativos; arranca rápido sea cual sea el tamaño de la app
Empaqueta antes de servir; el arranque crece con la app
Build de producción
Empaqueta con su propio bundler (Rolldown en Vite 8)
Su propio bundler, muy configurable
Configuración
Configuración pequeña, valores por defecto sensatos
Potente, hay más que escribir
Dónde te lo encuentras
Vue, Svelte, Astro, React Router y muchas apps de React
Apps de React más antiguas, Next.js (junto a Turbopack)
¿Vas a crear un sitio de contenido? Consulta también