Material da palestra intitulada Do Server-Side Rendering ao Nuxt: Reflexões, Críticas, Dicas e Etcéteras proferida pelo professor Erick Petrucelli para o Vue.js Summit 2018, oferecendo cinco projetos Vue demonstrando incrementalmente a implementação de uma solução de renderização através do servidor.
Cada diretório deste repositório representa um projeto independente, contendo seu próprio package.json. É necessário navegar pelo terminal ao diretório desejado antes de executar os comandos.
# instalar dependências
$ npm i # OU yarn
# servir em localhost
$ npm run devEnfatiza-se que, por se tratarem de projetos para demonstração em uma palestra, os códigos focam apenas em compilação para desenvolvimento, não devendo ser utilizados integralmente para soluções em produção.
Embora os comandos para iniciar sejam equivalentes, cada um dos projetos possui muitas particularidades. De forma resumida, os exemplos de 1 a 4 apresentam a evolução da configuração de uma aplicação, conforme recomendações do guia de SRR no Vue, enquanto o exemplo 5 demonstra solução equivalente utilizando o framework Nuxt.js.
Este projeto apresenta uma configuração básica com express e vue-server-renderer, demonstrando como é simples gerar um HTML estático através do servidor, montado a partir de uma instância Vue. Entretanto, não possui interação no cliente!
Este projeto estende a configuração básica anterior, demonstrando como é simples injetar um <script> no cliente, visando oferecer a interação desejada. Seria possível injetar qualquer coisa, como um trecho de código jQuery (imagine o absurdo!). Neste caso, o exemplo utiliza uma cópia do seu próprio código Vue usado no servidor, replicado no arquivo para o cliente.
O exemplo anterior deixa evidente que precisamos de automatização para gerar as instâncias para o servidor e para o cliente, com os devidos ajustes, evitando construir um código exclusivo (ou duplicado) para cada camada da aplicação. Obviamente a solução passa por empacotadores (module bundlers), sendo o Webpack a escolha natural. Tal compartilhamento de código é o que chamamos de aplicação Universal. Embora o Webpack possa ser assustador para iniciantes, este projeto apresenta uma configuração simplificada e comentada das configurações, para auxiliar a compreensão.
Incrementando o exemplo anterior, este projeto possui os ajustes necessários para integração com o vue-router, tanto para a renderização da rota correta a partir do servidor, quanto para a navegação estilo single page application no cliente. Este ponto é crucial, pois alguns desenvolvedores afirmam não utilizar SSR pois preferem SPA, ignorando que qualquer aplicação universal com vue-router oferece navegação SPA por natureza.
Este exemplo é brutalmente mais simples no código em relação aos anteriores, embora ofereça as mesmas funcionalidades (na verdade, oferece muito mais do que os exemplos anteriores puderam abordar). Graças ao framework Nuxt.js, temos uma solução de aplicação universal com suporte a vue-router, vuex e hot reloading em desenvolvimento, além de todas as otimizações necessárias para empacotar para produção. Vale ressaltar que foi utilizado o pacote nuxt-edge para demonstrar a simplicidade de utilização da versão 2.0, que está próxima do lançamento.
Copyright © 2018, Erick Eduardo Petrucelli