DEV Community: Isabela Karkache

SSR, SSG e SPA no Nuxt: o que são, e quando utilizar cada um?

Isabela Karkache — Tue, 05 Aug 2025 09:21:00 +0000

Pra mim, o primeiro passo em um projeto novo de desenvolvimento é a engenharia. De acordo com a natureza e os requisitos de cada produto, consigo definir se vou utilizar HTML, CSS e JS puros, ou se vou usar Vue, ou se vou precisar do Nuxt. Essa parte geralmente é fácil.

Quando a decisão é por utilizar o Nuxt, a próxima etapa é entender que tipo de renderização é mais adequada e vai atingir o melhor resultado, de acordo com o que se espera do produto final. E era aí que eu tinha dúvidas... Por isso, enquanto eu estudava sobre o assunto, achei que seria interessante montar um guia (até pra eu mesma utilizar como colinha quando for iniciar um novo projeto com Nuxt).

Se estiver com preguiça de ler toda a parte teórica, pode pular direto para a tabela comparativa no fim da página. Mas pra entender no detalhe e conferir as minhas conclusões e justificativas técnicas, segue a leitura.

Tipos de renderização do Nuxt

Server-side rendering (SSR)

No SSR, a aplicação é renderizada no servidor a cada requisição antes de chegar no navegador. O usuário não recebe uma página em branco inicial, mas sim um HTML já montado com todo o conteúdo da página. Após entregar o HTML completo, o Nuxt carrega e executa o Javascript no cliente para "hidratar" a interface, ou seja, ligar os event handlers e tornar a página interativa.

Como o HTML já vem com conteúdo, os crawlers de busca conseguem indexar a página mais facilmente, sem precisar executar js, e isso traz um bom resultado de SEO. A experiência do usuário também melhora, pois o usuário vê o conteúdo pré-renderizado sem precisar esperar o download e execução do script.

Claro que uma solução mais robusta também requer um investimneto mais robusto. Como o SSR requer um servidor rodando para renderizar as páginas em tempo real, considere que essa opção acaba aumentando os custos de hospedagem e a infraestrutura necessária.

Obs.: o SSR é o modo padrão de renderização do Nuxt quando se inicia um novo projeto. Basta rodar a aplicação que o Nuxt fará a renderização server-side automaticamente.

Static Site Generation (SSG)

No SSG ao invés de gerar a página a cada requisição, o Nuxt gera um HTML estático para cada rota no momento do build, e esse arquivo é servido ao usuário de forma estática. Ou seja, no SSR a renderização ocorre em tempo de requisição, e no SSG em tempo de build.

Obs.: o "estático" aqui se refere ao conteúdo. As páginas ainda poderão ser hidratadas no cliente para adicionar interatividade, assim como funciona no SSR tradicional. Apenas o conteúdo se mantém estático. Por isso, não é uma boa escolha caso o conteúdo seja dinâmico.

Para usar SSG você mantém o SSR ativado (já vem ativado por padrão) e executa o comando de geração estática (exemplo, npx nuxt generate). O Nuxt então pré-renderiza todas as rotas possíveis em arquivos HTML estáticos e esses arquivos podem ser hospedados em qualquer serviço de static hosting (exemplo Vercel, Github Pages, etc). Por esse motivo, a hospedagem pode ser muito barata ou até mesmo gratuita dependendo do serviço escolhido, então é uma boa opção no quesito investimento.

Da mesma forma que o SSR, o HTML já vem com conteúdo, garantindo boas práticas de SEO e uma experiência fluida para o usuário.

Single Page Application ou Client-side Rendering (SPA ou CSR)

No caso da SPA, não tem renderização inicial no servidor. O Nuxt entrega um HTML praticamente vazio, contendo apenas uma estrutura básica + arquivos de script e CSS.

Todo o trabalho de montar a interface acontece no navegador via js. Então, quando o usuário acessa a página, ele inicialmente vê uma tela em branco enquanto o bundle é baixado e executado, para só então renderizar os componentes da interface. Como o conteúdo pode demorar a ser montado na página (dependendo do dispositivo do usuário), não é uma boa opção se você prioriza o SEO, já que o carregamento do conteúdo "cru" não é prioridade.

Para criar uma SPA é necessário desativar o SSR, e isso pode ser feito no arquivo de configuração do Nuxt (nuxt.config.ts): basta definir ssr: false e o build será feito no modo SPA.

Tabela comparativa

Obs.: O Nuxt também traz uma possibilidade de renderização híbrida (hybrid rendering), em que você pode, por exemplo, ter em uma única aplicação seções rodando como SPA, outras pré-geradas estaticamente e outras com SSR sob demanda. Esse assunto é um pouco mais complexo e provavelmente será meu próximo estudo, mas achei interessante trazer para demonstrar que o Nuxt oferece essa flexibilidade.

Esse artigo foi parte do meu processo de entender melhor essas possibilidades, e espero que ele também ajude outros desenvolvedores. Se ficou alguma dúvida ou crítica, fico a disposição nos comentários. :)

Referências utilizadas para estudo

Github Copilot e outros benefícios de graça com a licença de estudante

Isabela Karkache — Sun, 03 Dec 2023 04:06:42 +0000

Você sabia que pode usar o GitHub Copilot de graça? Vou te mostrar como liberar essa e outras vantagens através do GitHub Student Pack.

Acessando este link você poderá ver os benefícios que esse pacote para desenvolvedores estudantes oferece.

Domine Antes de Automatizar 📚
Sei que se conselho fosse bom, ninguém dava de graça, mas fica aqui meus 10 centavos: se você está começando a programar, é recomendável estudar a linguagem sem depender do Copilot. A ideia é construir uma base sólida antes de deixar o Copilot agir como seu assistente. Isso garante que você entenda os princípios fundamentais da programação e saiba o que está fazendo, e o Copilot vai servir apenas como facilitador na escrita de código.

Copilot no Ambiente de Trabalho ⛔
Evite usar o Copilot no ambiente de trabalho sem permissão expressa. Apesar das garantias oferecidas pelo Github no momento do cadastro, é sempre melhor prevenir problemas de privacidade e segurança. Eu tenho certeza que você não vai querer vazar algum código privado ou sensível da empresa em que trabalha sem querer, então mantenha no uso pessoal e divirta-se 😊

Agora, vamos ao tutorial.

Requisitos: Documentação e Prova de Estudante

Antes de começar o tutorial, certifique-se de atender aos requisitos:

Esteja cursando graduação ou pós-graduação em uma instituição válida.
Tenha em mãos um documento que comprove sua matrícula, como carteirinha ou declaração. O documento deve incluir o nome da universidade escrito por extenso (não vale apenas a logo, infelizmente), uma data de validade e seu nome completo.

Passo a passo para liberar seu GitHub Student Pack 🛠️

Faça login com sua conta do GitHub no Github Global Campus através do link fornecido
Clique em "Join Global Campus" e confirme que você é um estudante - lembrando, você precisa ser comprovadamente um estudante para ser apto a licença.
Se tiver um e-mail institucional com o nome da universidade, use-o para agilizar a aprovação. Se não, insira um e-mail válido que você tenha acesso.
Preencha o nome da sua universidade e, caso a opção não apareça nas sugestões do campo, adicione manualmente.
Explique brevemente como pretende usar a conta de estudante. Nesta etapa, eu redigi um texto em inglês explicando que utilizaria o Github Copilot como assistência de código em meus projetos pessoais, mas você pode fazer como julgar melhor. Siga para o próximo passo
Agora, você deverá adicionar uma imagem que comprove sua matrícula. Atenção neste passo! Você não poderá adicionar uma imagem do seu computador - terá que tirar a foto na hora, utilizando a câmera do dispositivo. Como eu fiz: abri a declaração de matrícula da pós graduação no meu celular, dei zoom na parte do documento que mostrava as informações que constam como requisitos (nome da instituição escrito por extenso, meu nome completo, data de validade do documento e assinatura oficial da instituição) e posicionei o celular na frente da webcam do meu desktop. Quando consegui um bom foco, que mostrava o texto totalmente legível e em um tamanho adequado, tirei a foto. Se você não fizer este passo rigorosamente de acordo com as regras que o Github impõe, a sua solicitação será recusada e você terá que reiniciar o processo (digo isso por experiência própria, só consegui a aprovação na segunda tentativa).
Aguarde a análise da sua inscrição. A resposta será enviada para o e-mail cadastrado.
Caso sua solicitação seja recusada, fique tranquilo. O GitHub oferecerá feedback detalhado sobre o que precisa ser ajustado. Use essas informações para aprimorar sua próxima tentativa e garantir uma aprovação rápida. Esteja atento ao feedback, ajuste conforme necessário e tente novamente. Sua aprovação está a caminho! 🌟
Se a sua solicitação for aprovada, é só curtir os benefícios. Agora, vou apresentar um passo a passo extra super rápido para ativar a extensão do GitHub Copilot no seu VS Code.

Ativando o GitHub Copilot no VS Code 🚀

Acesse a página do GitHub logado na conta que possui o GitHub Student Pack.
Clique em seu avatar no canto superior direito e selecione "Copilot".
Se tudo estiver correto, clique em "Get Access to GitHub Copilot".
No VS Code autenticado com sua conta GitHub, baixe a extensão do Copilot e comece a explorar seu potencial.

É isso, galera! Espero que este guia tenha sido útil para vocês, assim como foi para mim. Se tiverem alguma dúvida ou sugestão, fiquem à vontade para compartilhar.