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. :)
Top comments (0)