Implementação: estática vs SSR
Gerar um site totalmente estático com nuxt generate, implementar uma aplicação SSR num servidor Node ou num ambiente de execução na extremidade e configurar o motor Nuxt nitro.
Implementação: estática vs SSR é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O Nuxt renderiza em qualquer lugar
O Nuxt 3 oferece suporte a quatro modos de implantação: Estático (nuxt generate), SSR (servidor Node), Edge (Cloudflare Workers, Vercel Edge) e Híbrido (por rota).
Implantação estática
nuxt generate pré-renderiza todas as rotas em arquivos HTML. Implante a pasta .output/public em qualquer servidor estático (Netlify, Vercel, GitHub Pages, S3).
npm run generate
# .output/public/ contains:
# index.html, about/index.html, blog/post-1/index.html, ...
# Deploy:
npx wrangler pages deploy .output/public
# or
rsync -av .output/public/ user@host:/var/www/Gerando rotas dinâmicas
Para rotas como /blog/[slug], o Nuxt precisa conhecer todos os slugs. Forneça-os por meio de nitro.prerender.routes na configuração.
// nuxt.config.ts
export default defineNuxtConfig({
nitro: {
prerender: {
routes: ['/blog/post-1', '/blog/post-2', '/blog/post-3']
}
}
});
// Or auto-discover: Nitro follows links from /, generating any it finds.Implantação de SSR no Node
nuxt build cria um servidor Nitro. Implante em qualquer servidor Node (Render, Railway, Fly.io, seu VPS) executando node .output/server/index.mjs.
npm run build
# .output/server/index.mjs is the Nitro server
# .output/public/ contains static assets
node .output/server/index.mjs # starts on PORT (default 3000)Nitro — o servidor universal
O servidor do Nuxt 3 é o Nitro — um mecanismo portátil que pode ser executado em qualquer ambiente: Node, Bun, Deno, Cloudflare Workers, Vercel, Netlify e AWS Lambda. Alterne os alvos com nitro.preset.
Implantação na borda (Cloudflare Workers)
Defina o preset como cloudflare-pages ou cloudflare. A compilação gera um Worker executado na borda da Cloudflare.
// nuxt.config.ts
export default defineNuxtConfig({
nitro: { preset: 'cloudflare-pages' }
});
// Build, then:
npx wrangler pages deploy ./distImplantação na borda (Vercel Edge)
A Vercel detecta o Nuxt automaticamente e usa o preset correto. Para forçar o ambiente de execução Edge: preset: 'vercel-edge'.
Renderização híbrida
Diferentes rotas podem ser renderizadas de maneiras diferentes. Configure isso com routeRules.
// nuxt.config.ts
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true }, // SSG
'/blog/**': { isr: 60 }, // ISR every 60s
'/dashboard/**': { ssr: false }, // SPA (client-only)
'/admin/**': { ssr: true } // SSR (per-request)
}
});Escolhendo entre estático e SSR
Estático: conteúdo que muda raramente, velocidade máxima e hospedagem barata em CDN (blogs, marketing, documentação). SSR: conteúdo por usuário, dados dinâmicos e resultados de pesquisa (painéis, comércio eletrônico). O modo híbrido permite combinar as opções por rota.
Variáveis de ambiente
Use runtimeConfig em nuxt.config.ts. public fica exposto ao cliente; o restante permanece apenas no servidor.
export default defineNuxtConfig({
runtimeConfig: {
apiSecret: '', // server-only, set via NUXT_API_SECRET env
public: {
apiBase: 'https://api.example.com' // accessible client-side
}
}
});
// In a component:
const config = useRuntimeConfig();
console.log(config.public.apiBase);Cache de compilação na CI
Armazene .nuxt/ e node_modules/ em cache entre as execuções da CI para acelerar as compilações. Na Vercel e na Netlify, isso é automático.
Teste de desempenho
Depois da implantação, execute o Lighthouse usando a URL implantada — não o localhost. CDN real, locais reais na borda e limitação real da CPU.
Verificação rápida
Qual comando do Nuxt 3 pré-renderiza todas as rotas em HTML estático para implantação em uma CDN como Netlify ou Cloudflare Pages?
Recapitulação: implantação do Nuxt
nuxt generate → estático (implante .output/public). nuxt build → SSR (implante com Node). Os presets do Nitro têm como alvo Cloudflare, Vercel, Netlify, AWS etc. routeRules permite renderização híbrida (prerender, isr, ssr, spa por rota). runtimeConfig é usado para variáveis de ambiente (public fica exposto ao cliente). Faça testes com o Lighthouse usando a URL implantada.
Perguntas Frequentes
A aula “Implementação: estática vs SSR” é grátis?
Sim — o texto completo de “Implementação: estática vs SSR” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Implementação: estática vs SSR”?
Gerar um site totalmente estático com nuxt generate, implementar uma aplicação SSR num servidor Node ou num ambiente de execução na extremidade e configurar o motor Nuxt nitro. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Implementação: estática vs SSR”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Roteamento baseado em ficheiros e importações automáticas
- useFetch e useAsyncData
- Módulos Nuxt: imagens, autenticação e i18n
- Implementação: estática vs SSR