Quer saber o que são SPA e SSR, como eles podem melhorar o uso do seu site e como utilizar Vue.js e Nuxt.js para construir universal apps?
Com a evolução das técnicas e paradigmas de desenvolvimento uma nova estrutura de desenvolvimento que tenta resolver problemas antigos e com foco em melhorar a experiência do usuário, removendo a necessidade de recarregar a página para cada alteração que é feita na página ou a cada alteração de página, nesse artigo vamos falar um pouco sobre como SPA e SSR funcionam e como eles podem melhorar o uso do seu site.
Quer saber mais sobre como utilizar Vue.js e Nuxt.js para construir Universal Apps mesclando os conceitos de SPA e SSR? Assista a apresentação do Erick Petrucelli no Conexão KingHost.
O que são SPAs e qual problema o Vue.js resolve?
Os Single Page Applications proporcionam uma interface rápida e fluida para os usuários e uma forma ágil e rápida de criar essas interfaces para os desenvolvedores.
Criar um SPA utilizando algum framework web como o Vue.js é extremamente simples e rápido e facilita desde uma prototipação simples até a entrega de projetos ambiciosos e complexos.
Porém as SPAs possuem alguns problemas que podem gerar dificuldades na visualização do site para visitantes que não possuem o javascript ativo, ou utilizam navegadores em versões muito antigas.
O que são SSRs e qual problema o Nuxt.js resolve?
Os SSRs, assim como o Nuxt.js, resolvem os problemas de falta de javascript e falta de otimização para SEO, e faz isso de forma que não seja necessário nenhum outro esforço na construção do SPA.
Antes vamos relembrar como um SPA construído com Vue.js ou React funcionam, quando o usuário ou mecanismo de busca (Google, bing etc.) realiza o acesso ao seu site ele somente encontra uma página em branco com uma referência para um arquivo javascript e após o carregamento desse arquivo todos os elementos são exibidos na tela, porém quando o acesso é feito com o javascript desabilitado, ou com um navegador não suportado originalmente, a página não será exibida ou pode apresentar alguma inconsistência devido ao navegador lidar de forma diferente com o código javascript.
Um Server Side Renderer (renderizador no lado do servidor) resolve esse problema de uma forma bastante simples e inteligente, ele fica no meio do caminho entre o usuário ou mecanismo de busca e o seu site, e quando o acesso vem de alguém com um navegador incompatível, mecanismo de busca ou usuário sem javascript o SSR que realiza ao seu SPA, aguarda os download e exibição dos elementos visuais do site e entrega o resultado final para o navegador do usuário, então garantimos que nosso SPA será exibido da mesma forma para todos que acessam o site e que os mecanismos de busca, garantindo assim um ótimo rank de SEO para o SPA.
Para exemplificar o funcionamento acima, podemos tomar como base a imagem abaixo:
Mas um SSR não faz somente isso, é possível realizar inúmeras outras tarefas com um SSR, como por exemplo gerar um cache da sua página e aumentar ainda mais a velocidade de navegação dos seus visitantes.
Muito legal, mas como que isso funciona na prática?
A criação de um SPA com o Nuxt.js é bastante simples, o primeiro passo é utilizar o npx para criar o esqueleto:
npx create-nuxt-app testapp
Depois já estamos aptos para realizar o build e iniciar o servidor e o SPA que vem embarcado como Nuxt.js.
npm run build
Agora acessando http://localhost:3000 podemos ver a tela inicial do Nuxt.js.
E isso é só o começo, é possível criar qualquer coisa com essa combinação de Vue.js e Nuxt.js, e o melhor é que a documentação do Vue.js está traduzida para português brasileiro.
Se você gostou do que foi apresentado nesse artigo, pode assistir a palestra do Erick Petrucelli no Conexão KingHost para aprender mais sobre SPA, SSRs, Vue.js e Nuxt.js para construir aplicações ainda melhores 🙂
