Migração Next.js → Vite
Remoção do runtime de SSR de aplicações que não precisavam dele, cortando custo de cloud e 80% do tempo de deploy.
- Meu papel
- Líder técnico da migração
- Contexto
- SBSistemas · Smarten Venture Builder
- Categoria
- Performance & DevOps
Liderei a migração de aplicações Next.js para React com Vite, eliminando um servidor de renderização que não trazia benefício para produtos autenticados e reduzindo custos de infraestrutura junto com o tempo de entrega.
Resultados
- −80%
- no tempo de deploy Entrega do produto caiu de 15 para 3 minutos
- −1
- servidor em produção Runtime de SSR eliminado, com redução direta de custo de cloud
- 0
- janelas de indisponibilidade Migração incremental, com o produto no ar o tempo todo
O problema
Os produtos eram sistemas fechados atrás de login: todo o conteúdo é privado, nada é indexado por buscadores e não existe ganho de SEO ou de primeiro carregamento público a ser extraído do SSR. Mesmo assim, pagávamos o preço completo do framework — servidor Node rodando em produção, custo de cloud recorrente, build lento e uma camada de complexidade que aparecia em cada bug de hidratação. O deploy levava 15 minutos.
A solução
Conduzi a migração para uma SPA React empacotada com Vite. A decisão foi tomada a partir do perfil real de uso do produto, não por preferência de ferramenta: sem necessidade de renderização no servidor, o runtime deixa de ser uma vantagem e passa a ser apenas custo. A migração foi feita de forma incremental, tela por tela, mantendo o produto no ar durante todo o processo.
Principais desafios
-
Substituir o roteamento baseado em arquivos do Next por um roteador explícito, preservando todas as URLs já usadas pelos clientes.
-
Migrar sem congelar o roadmap: a aplicação continuou recebendo funcionalidades novas enquanto a base era trocada por baixo.
-
Reproduzir o que o framework entregava de graça — code splitting por rota, otimização de assets e variáveis de ambiente — de forma explícita e auditável.
-
Convencer o time com dados em vez de opinião, medindo tempo de build, tamanho de bundle e custo de infraestrutura antes e depois.
Tecnologias utilizadas
- React
- Vite
- TypeScript
- Next.js
- Zustand
- TanStack Query
- Docker
- GitLab CI/CD
A decisão por trás da migração
A pergunta que guiou o projeto não foi “qual framework é melhor”, e sim “o que este produto específico ganha com renderização no servidor”. Para uma aplicação inteiramente autenticada, a resposta honesta era: nada que justificasse o custo.
Documentar isso com números — tempo de build, tamanho de bundle, custo mensal de cloud — foi o que transformou uma preferência técnica em uma decisão de engenharia defensável.
Projetos relacionados
makley.com
Este portfólio — Astro, TypeScript e arquitetura em camadas, com praticamente zero JavaScript no cliente.
0 KB de framework de UI
- Astro
- TypeScript
- CSS moderno
- Atomic Design
- DDD
- +2