Vue Academy · Aula

Modo SSR vs SSG vs SPA

ssr:true/false, pré-renderização com Nitro, comando generate e renderização híbrida por rota.

Modo SSR vs SSG vs SPA é uma aula grátis de Vue 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 Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Visão geral dos modos de renderização

O Nuxt pode renderizar seu aplicativo de três maneiras: SSR (o servidor renderiza cada requisição), SSG (as páginas são pré-criadas no momento da compilação) e SPA (tudo é renderizado no navegador). Também é possível combiná-las por rota.

SSR: o padrão

Com ssr: true (o padrão), o servidor renderiza HTML para cada requisição e o cliente o hidrata. Isso proporciona uma primeira renderização rápida e um bom SEO, pois os rastreadores veem a marcação completa.

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true
})

Quando o SSR se destaca

O SSR é adequado para conteúdos que mudam com frequência ou são personalizados — painéis, feeds e comércio eletrônico com preços atualizados — quando você deseja HTML atualizado a cada requisição.

Modo SPA

Definir ssr: false transforma o Nuxt em um aplicativo de página única: o servidor envia uma estrutura vazia e o navegador renderiza tudo. É mais simples de hospedar, mas oferece um SEO mais fraco e uma primeira renderização mais lenta.

export default defineNuxtConfig({
  ssr: false
})

Quando a SPA é adequada

O modo SPA é adequado para ferramentas internas e aplicativos protegidos por login, nos quais o SEO não é importante e você deseja disponibilizar arquivos estáticos em qualquer CDN.

SSG: geração de site estático

Executar nuxt generate pré-renderiza todas as páginas como HTML estático no momento da compilação. O resultado é uma pasta de arquivos que pode ser hospedada em qualquer lugar, sem um servidor Node.

npx nuxt generate
# outputs static HTML to .output/public

Quando o SSG é adequado

O SSG é perfeito para conteúdos que raramente mudam — blogs, documentações e sites de marketing. As páginas são extremamente rápidas e têm baixo custo de disponibilização a partir de uma CDN.

Renderização por rota com routeRules

A configuração routeRules define o modo de renderização para cada padrão de caminho. Isso é renderização híbrida: diferentes partes de um mesmo aplicativo usam estratégias diferentes.

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/admin/**': { ssr: false },
    '/blog/**': { swr: 3600 }
  }
})

Opções comuns de routeRules

prerender: true prepara a página no momento da compilação; ssr: false faz com que ela seja uma SPA; swr: n armazena o resultado do SSR por n segundos (desatualizado enquanto é revalidado); redirect envia os usuários para outro lugar.

Regeneração estática incremental

A opção isr pré-renderiza na primeira requisição e armazena o resultado, gerando-o novamente periodicamente. Ela combina a velocidade do SSG com a atualização do SSR para páginas populares.

routeRules: {
  '/products/**': { isr: 600 }
}

Escolhendo uma estratégia

Comece com SSR para obter a melhor combinação padrão de SEO e interatividade. Use SSG para conteúdo estático, SPA para aplicativos privados e routeRules para ajustar rotas individuais conforme surgirem necessidades de desempenho.

Verificação rápida

Teste seus conhecimentos sobre os modos de renderização.

Recapitulação

Você aprendeu sobre os modos de renderização:

SSR (padrão) renderiza por requisição: oferece bom SEO e uma primeira renderização rápida.
ssr:false fornece uma SPA para aplicativos privados.
nuxt generate produz um site SSG estático.
routeRules permite a renderização híbrida: prerender, swr, isr e ssr:false por rota.

Perguntas Frequentes

A aula “Modo SSR vs SSG vs SPA” é grátis?

Sim — o texto completo de “Modo SSR vs SSG vs SPA” é 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 Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Modo SSR vs SSG vs SPA”?

ssr:true/false, pré-renderização com Nitro, comando generate e renderização híbrida por rota. Você pratica Vue 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 Vue Academy?

Nenhuma experiência prévia é necessária. Vue 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 “Modo SSR vs SSG vs SPA”?

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 Vue Academy?

Sim. Cada aula de Vue 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

← Voltar para Vue Academy