Um pouquinho de história

A internet dessa década é baseada em experiência de usuário, tudo necessita ser rápido, prático, acessível, intuitivo e bonito para garantir que o usuário não vai deixar um site ou ferramenta e acessar algum concorrente que atenda esses requisitos.

Pouco tempo atrás a solução padrão para sites na internet era aplicações MPA, sigla para multi-page application. Nesse modelo os sites são na verdade várias páginas HTML interligadas por links, onde todo o conteúdo visível, ou pelo menos a grande parte dele eram geradas no servidor e repassado para o usuário já formatado e pronto para serem exibidos.

Na primeira vista parece excelente, afinal o servidor pode ter muita mais força computacional do que um computador pessoal, porém isso não se aplica na prática, afinal existe um atraso causado pela necessidade de enviar, processar e receber os dados completos da página em cada interação do usuário.

O Que é um SPA?

Apesar de o termo estar sendo mais popular recentemente, a ideia não é nova, conceitos semelhantes já estavam sendo testados em 2002, porém só foi ser algo viável em produção em 2006 com o mecanismo AJAX.

Graças ao AJAX o programa recebe os dados em segundo plano enquanto renderiza os elementos estáticos que não sofrem alterações, como menus, logotipos, rodapés, cabeçalhos e coisas do tipo.

Porém apesar de praticamente todos os desenvolvedores front-end já terem utilizado AJAX uma vez na vida, o sucesso dos sites SPA não são devidos a ele. A popularização das single pages application veio com o aumento da demanda por melhor UX(User experience ou experiência do usuário).

Juntamente com essa demanda surgiram ferramentas para atendê-la, como a própria evolução do JavaScript e principalmente seus frameworks como o Angular, React.js ou Vue.js, que são relativamentes novos se comparado com a WEB como um todo.

Quais as vantagens das aplicações de página única?

A principal vantagem das SPA é sua velocidade e facilidade de fazer interfaces amigáveis para o usuário, a performance está principalmente pois elimina a necessidade de baixar os mesmo dados em todas as interações do usuário, sendo requisitado apenas aquelas informações que sofreram alterações e que podem estar desatualizadas por algum motivo, com um feed ou um histórico de pedidos por exemplo.

Outra grande vantagem das SPA é que em geral são mais fáceis de depurar, afinal ao invés de ter milhares de linhas no lado do servidor e outras centenas no cliente, o desenvolvedor pode focar em analisar o código renderizado no navegador, além disso boa parte dos frameworks abstraem e criam ferramentas para facilitar esse processo de debug.

Exemplos de Single-Page application

Boa parte dos aplicativos WEB que focam na experiência do usuário são na verdade Single-Page Application, alguns exemplos são o Facebook, Gmail, Instagram, NetFlix ou até mesmo o Google Maps.

Como o Vue.js e o Nuxt.js estão relacionados com isso e como eles resolvem esses problemas?

O Que é o Vue.js?

O Vue.js é um framework javascript que facilita a criação de aplicações de página única. Ele executa inteiramente do lado do cliente, isso significa que o servidor é responsável apenas por entregar os dados e os arquivos necessários para que o navegador monte o site.

Esse detalhe pode ser bastante vantajoso, pois permite montar telas extremamentes responsivas e customizáveis, porém trazem grandes problemas para o SEO, pois na prática se você apenas acessar o link do site verá apenas uma página em branco, afinal a ideia é que essa página seja montada apenas no navegador, mas para os mecanismos de buscas isso não é tão simples e prático, imagine o custo que teria para indexar renderizando todas as páginas da internet.

O Que é o Nuxt.js e SSR e como isso resolve o problema de SEO do Vue.js?

O Nuxt.js surgiu justamente para resolver esse problema, e a solução é extremamente simples(pelo menos o conceito é simples), ele aplica o que foi batizado de SSR, sigla para Server-Side Rendering, basicamente ele renderiza essa página no servidor e já entrega para o usuário montada, com todas as informações, porém com várias otimizações se comparadas aos sites mais antigos, que também faziam isso, porém de maneira burra refazendo o trabalho muitas vezes.

Por esse motivo, quando o Google ou qualquer outro robô acessa seu site, ele verá a página com todo o conteúdo prontinho para ser indexado, e o usuário verá o conteúdo também, e terá todas as possibilidades de interações que uma SPA pode oferecer, essa é a mágica do SSR, proporcionar usabilidade com performance.

Fazendo sua primeira aplicação SSR em Nuxt.js e testando esses conceitos

O mais legal é que o Nuxt.js tem uma documentação belíssima, e melhor, recomendo conferir a documentação no site oficial do Nuxt.js.

Para criar sua primeira aplicação primeiramente você necessita já ter o nodeJs e o npm instalados em sua máquina, após vá ao terminal e caminhe até uma pasta onde gostaria de colocar seu projeto, depois basta utilizar o comando abaixo:

npm init nuxt-app <nome-projeto>

Após basta responder algumas perguntas, a primeira é se você deseja instalar as dependências necessárias, basta colocar y e apertar enter.

Depois será perguntado qual o nome do projeto, se você deixar em branco será utilizado o nome fornecido na chamada do comando.

Depois pergunta se deseja utilizar TypeScript ou JavaScript, vai de escolha pessoal mas se é novato em desenvolvimento WEB recomendo selecionar o JavaScript.

A próxima pergunta é qual gerenciador de pacote você deseja utilizar, NPM ou Yarn, eu normalmente utilizo o npm.

Depois pergunta se deseja algum framework de interface, recomendo testar vários até encontrar algum que se encaixe na ideia do projeto, um coringa que se encaixa e se adapta a quase tudo e que é muito completo(e um pouquinho mais complexo que os demais) é o TailWind Css.

Depois pergunta se deseja algum módulo para acesso a conteúdo, eu normalmente utilizo o Axios como padrão.

Depois você será questionado sobre o Lint, eu costumo utilizar o EsLint.

Depois será perguntado sobre algum Framework de teste, recomendo deixar em branco.

E agora o mais importante, qual o modo de renderização que você deseja utilizar, para aplicar os conceitos deste artigo escolha Universal (SSR/SSG).

Na próxima questão escolha static.

Agora escolha o Dependabot caso utilize o GitHub ou o jsconfig.json não o utilize.

E agora é só aguardar que mais pacotes serão instalados e o seu site em Nuxt.Js estará pronto para ser testado.

Agora basta acessar a pasta e executar:

npm run generate

Depois basta iniciar:

npm run start

Agora acesse http://localhost:3000/ e já verá a primeira página do seu site, em futuros artigos irei aprofundar sobre como desenvolver algumas coisas utilizando o Nuxt.js, como um blog semelhante a esse.