React vs Vue vs Svelte vs Astro vs Next.js, com o mesmo app
Comparação de frameworks frontend
React vs Vue vs Svelte vs Astro vs Next.js: mesmo app, medido | We.Inc
React, Vue, Svelte, Astro e Next.js comparados com o mesmo app de tarefas em cada um, tamanhos de JavaScript medidos, uma tabela de decisão por tipo de projeto, notas sobre a curva de aprendizado e um quadro sobre Vite vs webpack.
Escolha pelo projeto, não pela popularidade. O Astro combina com sites de conteúdo porque as páginas saem como HTML com pouco ou nenhum JavaScript. O Next.js, construído sobre o React, combina com web apps completos. O Vue é o mais fácil de aprender e o Svelte envia menos código. Fizemos um app de tarefas em cada um: o Svelte enviou 13.8 KB com gzip, o Vue 25.8 KB e o React 68 KB.
Em uma linha cada
Ferramenta
Melhor em
React
Apps, com o maior ecossistema
Apps React completos com renderização no servidor
Vue
Apps acessíveis com templates
Svelte
Bundles pequenos, pouco boilerplate
Astro
Sites de conteúdo que enviam pouco JavaScript
Opiniões são fáceis de achar; medições do mesmo app, não. Escrevemos um pequeno app de tarefas em React, Vue, Svelte e JavaScript puro, fizemos o build de cada um com Vite, testamos clicando no navegador e medimos o que cada um envia. Astro e Next.js aparecem com o mesmo componente no lugar.
Encontre o seu tipo de projeto na tabela de decisão.
Confira a tabela de tamanhos se o peso da página importa, por exemplo para visitantes no celular.
Leia o mesmo app em cada sintaxe e veja qual parece mais natural para você.
Pense em quem vai manter o projeto e de quais bibliotecas você precisa.
Em um site de marketing, o framework importa menos do que imagens, fontes e scripts de terceiros.
O custo do runtime do React é pago uma vez; em um app maior a diferença diminui conforme o seu próprio código cresce.
Prefira o meta-framework oficial (Next.js, Nuxt, SvelteKit) a montar roteamento e renderização no servidor por conta própria.
Escolha o que o seu time já conhece, a menos que haja um motivo claro para trocar.
Perguntas frequentes
Next.js é a mesma coisa que React?
Não. O React é a biblioteca de interface; o Next.js é um framework construído sobre o React que adiciona roteamento, renderização no servidor, Server Components, carregamento de dados e uma configuração de build. Você escreve componentes React dentro do Next.js.
Astro ou Next.js para um site?
Para sites focados em conteúdo, como páginas de marketing, blogs e documentação, o Astro normalmente envia menos JavaScript e é mais simples. Para sites com cara de app, com login, dashboards e muita interação, o Next.js se encaixa melhor.
Vue é mais fácil que React?
Muita gente acha mais fácil para começar, porque os templates parecem HTML e a reatividade não exige atualizações imutáveis. O React pede que você aprenda JSX e as regras dos hooks primeiro, mas tem mais bibliotecas e vagas.
Por que o bundle do Svelte é tão pequeno?
O Svelte compila os componentes em código simples de atualização do DOM no momento do build, então envia um runtime pequeno em vez de um motor de renderização genérico.
Devo usar Vite ou webpack?
Para um projeto novo, Vite: ele inicia rápido e precisa de pouca configuração. O webpack ainda faz sentido em projetos existentes que dependem dos plugins dele.
Curva de aprendizado, com sinceridade
Vue e Svelte são os mais próximos de HTML, CSS e JavaScript puros, então iniciantes começam rápido. O React exige JSX, hooks e o hábito das atualizações imutáveis. O Astro é fácil para conteúdo, mas pede que você entenda as ilhas assim que adiciona interação. O Next.js acrescenta as fronteiras entre servidor e cliente em cima do React, o que é o degrau mais íngreme dos cinco.
Hospedagem
A saída estática do Astro, de apps Vite ou do export estático do Next.js pode ir para qualquer hospedagem estática ou CDN. A renderização no servidor precisa de uma hospedagem que rode Node ou de uma plataforma com funções serverless; veja o que a sua hospedagem suporta antes de escolher recursos de servidor.
O que cada um envia
Build feito com Vite em modo de produção; cada build foi testado em um navegador. Astro e Next.js não fizeram parte desta medição.
Medido: o mesmo app de tarefas, total de JavaScript enviado
Configuração
Minificado
Com 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 (com react-dom)
220.1 KB
68.0 KB
Qual escolher
Tabela de decisão por tipo de projeto
Projeto
Boa escolha
Por quê
Site de marketing, blog, documentação
Astro
As páginas saem como HTML sem JavaScript, a menos que uma parte precise
Web app com login e dashboards
Next.js ou React Router (React)
Grande ecossistema, renderização no servidor e carregamento de dados embutidos
App em que o time prefere templates
Vue com Nuxt
Curva de aprendizado suave, single-file components
Widgets pequenos e rápidos ou um app enxuto
Svelte com SvelteKit
A saída do compilador é pequena; pouco boilerplate
Algumas partes interativas em um site existente
JavaScript puro ou uma pequena ilha
Nenhum custo de framework
Contratar muitos desenvolvedores rápido
React
O maior grupo de pessoas e bibliotecas
Como eles se comparam
Em um relance
React
Vue
Svelte
Astro
O que é
Biblioteca de interface
Framework de interface
Compilador + framework
Framework para sites de conteúdo
Framework React
Componentes escritos como
Funções JSX
Arquivo único .vue
Arquivo único .svelte
.astro + qualquer biblioteca de interface
React (JSX)
Reatividade
Estado + novo render
Proxies (ref, reactive)
Runes compiladas ($state)
Por ilha
React
Renderização no servidor
Por meio de um framework
Por meio do Nuxt
Por meio do SvelteKit
Embutida (estática ou servidor)
Embutida
Licença
MIT
MIT
MIT
MIT
MIT
O mesmo app, de cinco jeitos
React
O estado fica nos hooks; cada mudança roda o componente de novo e o React atualiza as diferenças no DOM. As atualizações precisam criar novos arrays e objetos.
Vue
Script, template e (opcionalmente) estilos em um só arquivo. v-model liga os inputs nos dois sentidos e as refs são reativas, então dar push no array basta.
Svelte 5
Runes ($state, $derived) marcam valores reativos, e o compilador transforma o componente em atualizações diretas do DOM, e é por isso que o runtime dele é pequeno.
JavaScript puro
A referência. Serve para um widget pequeno, mas você escreve as atualizações do DOM e as mantém em sincronia com os dados na mão.
Astro: o mesmo app como uma ilha
O Astro renderiza a página em HTML e só faz hydration dos componentes que recebem uma diretiva client. Aqui o app de tarefas em Svelte carrega o JavaScript quando entra na tela ao rolar; o resto da página não envia nada.
Next.js: onde o mesmo componente entra
No App Router a página é um Server Component, então a lista de tarefas interativa vai em um arquivo próprio marcado com "use client". A página ao redor não envia JavaScript de componente próprio.
Quadro: Vite vs webpack
Vite vs webpack
Vite
Servidor de desenvolvimento
Serve o código-fonte como ES modules nativos; inicia rápido seja qual for o tamanho do app
Gera o bundle antes de servir; o tempo de início cresce com o app
Build de produção
Gera o bundle com o próprio bundler (Rolldown no Vite 8)
Bundler próprio, altamente configurável
Configuração
Config pequena, padrões sensatos
Poderoso, exige escrever mais
Onde você o encontra
Vue, Svelte, Astro, React Router e muitos apps React
Apps React mais antigos, Next.js (junto com o Turbopack)