🚀 Conexão kInghost: Aulas online e gratuitas para fazer o seu negócio evoluir no digital 💰

Kinghost | Blog

Como utilizar Vue.js e Nuxt.js para construir universal apps

Publicado em 16/09/2020

Atualizado em 03/06/2024
Como utilizar Vue.js e Nuxt.js para construir universal apps

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:

Como utilizar Vue.js e Nuxt.js para construir universal apps

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 🙂

O que você achou deste conteúdo?

O que você achou deste conteúdo?

Gabriel

Gabriel Petry

Geek, fascinado por Linux e programas Open Source.

Gabriel

Gabriel Petry

Geek, fascinado por Linux e programas Open Source.

Compartilhe esse conteúdo com alguém que possa gostar também

Receba todo mês conteúdos
incríveis como esses para
seguir evoluindo

Conteúdos relacionados

Criar um e-mail de cobrança é uma estratégia necessária quando se lida com inadimplência. Nesses momentos, a empresa deve ter cuidado para evitar cobranças indelicadas, que possam constranger o consumidor. Ao mesmo tempo, precisa convencer a pessoa a resolver logo o impasse. Por isso, é uma tarefa delicada. Neste artigo, vamos explicar como redigir um...
A assinatura de email pode ser uma das primeiras impressões que você transmite para outra pessoa, pois ela também é parte importante de uma mensagem online. Algo tão simples, mas que merece atenção, pois existem muitos detalhes que envolvem a criação de uma boa assinatura de email. Por isso, neste artigo, você vai entender um...
Você certamente já passou pela frustração de abrir um site que demora uma eternidade para carregar. Então, sabe como isso é irritante, não é mesmo? Se preferir ouvir o conteúdo, é só clicar no play! Com isso, sabe que a velocidade do site desempenha um papel fundamental na experiência dos usuários e no sucesso do...

📅 Aulão GRATUITO 🚀 Como VENDER MAIS na internet 💰

Mensagens para você