📅 Ebook GRATUITO 🚀 Como preparar o seu site para receber muitos acessos? 💰

Kinghost | Blog

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

Publicado em 16/09/2020

Atualizado em 26/04/2023
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

Conteúdos relacionados

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? Com isso, sabe que a velocidade do site desempenha um papel fundamental na experiência dos usuários e no sucesso do seu negócio online.  Neste artigo, você vai conhecer as melhores...
Se você é um Microempreendedor Individual (MEI), sabe que gerenciar sua empresa pode ser desafiador. Uma vez que, além de cuidar das finanças, lidar com clientes e fornecedores, você também tem a responsabilidade de cumprir com suas obrigações fiscais.  Uma dessas obrigações é fazer a declaração anual de faturamento, que é fundamental para manter sua...
Se você deseja entender como fazer registro de marca, este é o conteúdo certo. Afinal, vamos te explicar tudo sobre o assunto. Registrar a marca do seu negócio é a melhor forma de garantir os seus direitos de uso, bem como protegê-la da concorrência. Além disso, a marca registrada faz com que as pessoas vejam...
Para saber como montar servidor VPS, é importante saber que a sigla significa Virtual Private Server, um tipo de servidor virtual privado que oferece desempenho superior aos serviços tradicionais de hospedagem. Ao contrário dos servidores compartilhados, em que vários usuários compartilham o mesmo servidor, um VPS é virtualizado em uma máquina física dedicada. Então, os...

Assine a nossa newsletter e receba conteúdos para apoiar o crescimento do seu negócio

Sem Título(obrigatório)

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

Mensagens para você