Vercel: deploy moderno para frontends e aplicações web

O que é Vercel e para quem é indicado

A plataforma que redefiniu o deploy de frontends

Vercel é uma plataforma de hospedagem e deploy focada em frontends e full-stack JavaScript/TypeScript, criada pelos autores do Next.js. Ela abstrai toda a complexidade de servidores, CDN, SSL e CI/CD para que desenvolvedores foquem exclusivamente no código. A proposta de valor central é velocidade: conectar o repositório GitHub e fazer o primeiro deploy leva menos de dois minutos, sem configurar pipelines, servidores ou domínios. É a plataforma de eleição para projetos Next.js, React, Vue, Svelte, Astro e frameworks similares, mas também suporta backends via Serverless Functions e Edge Functions. A arquitetura da Vercel é otimizada para os modelos de entrega de conteúdo moderno: estático, SSR e edge computing.

Deploy automático — push para Git dispara build

Zero configuração de pipeline para o caso comum

O fluxo central da Vercel é simples: cada push em qualquer branch do repositório conectado dispara automaticamente um build e deploy na plataforma. O Vercel detecta o framework usado (Next.js, Vite, Create React App, etc.) e configura automaticamente o comando de build e o diretório de output — sem arquivo de configuração obrigatório para os frameworks suportados. Pushes na branch de produção (main ou master) atualizam o deployment de produção; pushes em outras branches criam preview deployments com URL única. O build roda em containers isolados no ambiente Vercel, garantindo reprodutibilidade. O tempo de build é monitorado e otimizado com cache de dependências entre deploys.

Preview deployments — URL por branch e pull request

Cada PR tem seu próprio ambiente de preview

Preview deployments são um dos recursos mais impactantes da Vercel: cada branch e cada pull request recebe uma URL única e imutável onde a versão correspondente do site está disponível. Isso transforma code review: revisores podem testar a feature diretamente no navegador sem precisar fazer checkout local, configurar dependências ou rodar o projeto. A URL de preview é compartilhável com stakeholders — PMs, designers e clientes podem dar feedback visual antes do merge. Deployments de preview são efêmeros mas preservados: a URL de um PR mergado ainda funciona, permitindo comparação com versões anteriores. Comentários de revisão podem incluir links diretos para a URL de preview relevante.

Serverless Functions no Vercel

Backend sem gerenciar servidores

Serverless Functions na Vercel permitem criar endpoints de API como arquivos em /api ou como route handlers do Next.js App Router. Cada função é deployada como uma instância independente que escala de zero a infinito — sem configurar servidores, sem gerenciar processos, sem se preocupar com concorrência em nível de servidor. O runtime suporta Node.js, Python, Ruby e Go. Cada requisição acorda a função, executa e termina; o estado entre requisições deve ser gerenciado externamente (banco de dados, Redis). Cold start é a principal latência: a primeira requisição após período de inatividade pode levar centenas de milissegundos. Para funções com alto tráfego constante, manter a função "quente" com requests periódicos ou usar Edge Functions é a solução.

Edge Functions — lógica na borda da rede

Execução a milissegundos do usuário final

Edge Functions rodam no Vercel Edge Network — distribuída em dezenas de pontos de presença ao redor do mundo — executando a função no datacenter mais próximo do usuário em vez de em uma região centralizada. Isso reduz a latência de centenas de milissegundos para menos de 50ms para a maioria dos usuários. Edge Functions usam a Web API platform (Request, Response, Fetch) e são limitadas a 1MB de código e sem acesso ao Node.js runtime completo. São ideais para: autenticação e redirecionamentos baseados em cookie, personalização de conteúdo por geolocalização, rewrite de URLs, middleware de A/B testing e feature flags. O Vercel Middleware (middleware.ts em Next.js) é implementado como Edge Function que intercepta todas as requisições antes do routing.

Variáveis de ambiente por ambiente

Configuração segura sem vazar secrets para o cliente

A Vercel distingue três contextos de variáveis de ambiente: Production (apenas deploys da branch de produção), Preview (todos os preview deployments) e Development (ambiente local via vercel dev). Variáveis prefixadas com NEXT_PUBLIC_ são expostas ao bundle do cliente — tudo o mais fica apenas no servidor. Secrets sensíveis como chaves de API são adicionados via dashboard ou CLI (vercel env add) e nunca aparecem nos logs ou no código-fonte. O Vercel Integrations permite conectar provedores como Vercel KV, Vercel Postgres, Upstash e outros que injetam automaticamente as variáveis de conexão no projeto. A prática recomendada é nunca commitar arquivos .env com valores reais — usar .env.example com placeholders documentando quais variáveis são necessárias.

Domínios e SSL automático

HTTPS sem configuração manual de certificados

Qualquer projeto na Vercel tem SSL automático via Let's Encrypt sem nenhuma configuração manual — o certificado é gerado e renovado automaticamente. Domínios customizados são adicionados via dashboard e verificados por DNS — a Vercel suporta tanto CNAME quanto A record. O Vercel oferece domínios em vercel.app gratuitos para projetos (projeto.vercel.app) e cada preview deployment tem URL em vercel.app. Wildcard domains permitem que todos os subdomínios de um domínio apontem para o projeto, útil para aplicações multi-tenant. A CDN da Vercel serve ativos estáticos (JS, CSS, imagens) com headers de cache otimizados e invalidação automática a cada deploy, garantindo que usuários recebem sempre a versão mais recente sem precisar gerenciar cache manualmente.

Performance — Core Web Vitals e analytics

Visibilidade sobre a experiência real do usuário

Vercel Analytics coleta Core Web Vitals (LCP, FID/INP, CLS) diretamente de navegadores reais dos seus usuários — não de simulações de laboratório — fornecendo uma visão precisa da performance percebida. O dashboard mostra distribuição de scores por rota, dispositivo e região geográfica, ajudando a identificar pages lentas para usuários móveis em países específicos. Vercel Speed Insights fornece dados de performance por URL com segmentação por dispositivo, connection speed e localização. Para projetos Next.js, a integração é nativa com um único pacote (@vercel/analytics). A Vercel também exibe um score de performance para cada deployment baseado nos dados reais coletados, criando um ciclo de feedback imediato entre deploy e impacto na experiência do usuário.

Limitações do Vercel — quando não é a escolha certa

Os trade-offs de uma plataforma opinada

O Vercel tem limitações importantes que determinam quando outras plataformas são mais adequadas. Execução de longa duração é limitada: Serverless Functions têm timeout de até 60 segundos no plano Pro, inadequado para processamento de vídeo, webhooks de longa duração ou jobs batch. WebSockets não são suportados nativamente em Serverless Functions — para aplicações real-time, são necessários serviços externos ou Edge Functions com limitações. O custo pode escalar rapidamente para aplicações com alto volume de Function executions ou bandwidth elevado — o modelo de pricing por execução e GB transferido surpreende times acostumados com custo fixo de servidor. Para backends pesados, workloads com estado ou aplicações que precisam de acesso a sistemas internos via VPN, plataformas como Railway, Render, Fly.io ou servidores tradicionais são mais adequados.

Conclusão

Vercel como plataforma de referência para deploy de frontends modernos

Continue em: Fundamentos obrigatórios antes de produção.