{"id":22937,"date":"2020-09-16T20:40:12","date_gmt":"2020-09-16T23:40:12","guid":{"rendered":"https:\/\/king.host\/blog\/?p=22937"},"modified":"2024-06-03T15:02:56","modified_gmt":"2024-06-03T18:02:56","slug":"vue-js-e-nuxt-js","status":"publish","type":"post","link":"https:\/\/king.host\/blog\/tutoriais\/vue-js-e-nuxt-js\/","title":{"rendered":"Como utilizar Vue.js e Nuxt.js para construir universal apps"},"content":{"rendered":"<p><strong><em>Quer saber o que s\u00e3o SPA e SSR, como eles podem melhorar o uso do seu site e como utilizar Vue.js e Nuxt.js para construir universal apps?<\/em><\/strong><\/p>\n<p>Com a evolu\u00e7\u00e3o das t\u00e9cnicas e paradigmas de desenvolvimento uma nova estrutura de desenvolvimento que tenta resolver problemas antigos e com foco em melhorar a experi\u00eancia do usu\u00e1rio, removendo a necessidade de recarregar a p\u00e1gina para cada altera\u00e7\u00e3o que \u00e9 feita na p\u00e1gina ou a cada altera\u00e7\u00e3o de p\u00e1gina, nesse artigo vamos falar um pouco sobre como SPA e SSR funcionam e como eles podem melhorar o uso do seu site.<\/p>\n<p>Quer saber mais sobre como utilizar Vue.js e Nuxt.js\u00a0para construir Universal Apps mesclando os conceitos de SPA e SSR? Assista a apresenta\u00e7\u00e3o do Erick Petrucelli no <a href=\"https:\/\/www.conexaokinghost.com.br\/\" target=\"_blank\" rel=\"noopener\">Conex\u00e3o KingHost<\/a>.<\/p>\n<p><iframe title=\"Vue e Nuxt para construir Universal Apps mesclando os conceitos de SPA e SSR | Conex\u00e3o KingHost 2020\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/uT4OC4lQxO0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<h2><b>O que s\u00e3o SPAs e qual problema o Vue.js resolve?<\/b><\/h2>\n<p>Os Single Page Applications proporcionam uma interface r\u00e1pida e fluida para os usu\u00e1rios e uma forma \u00e1gil e r\u00e1pida de criar essas interfaces para os desenvolvedores.<\/p>\n<p>Criar um SPA utilizando algum framework web como o <b>Vue.js <\/b>\u00e9 extremamente simples e r\u00e1pido e facilita desde uma prototipa\u00e7\u00e3o simples at\u00e9 a entrega de projetos ambiciosos e complexos.<\/p>\n<p>Por\u00e9m as SPAs possuem alguns problemas que podem gerar dificuldades na visualiza\u00e7\u00e3o do site para visitantes que n\u00e3o possuem o javascript ativo, ou utilizam navegadores em vers\u00f5es muito antigas.<\/p>\n<h2><b>O que s\u00e3o SSRs e qual problema o Nuxt.js resolve?<\/b><\/h2>\n<p>Os SSRs, assim como o Nuxt.js, resolvem os problemas de falta de javascript e falta de otimiza\u00e7\u00e3o para SEO, e faz isso de forma que n\u00e3o seja necess\u00e1rio nenhum outro esfor\u00e7o na constru\u00e7\u00e3o do SPA.<\/p>\n<p>Antes vamos relembrar como um SPA constru\u00eddo com Vue.js ou React funcionam, quando o usu\u00e1rio ou mecanismo de busca (Google, bing etc.) realiza o acesso ao seu site ele somente encontra uma p\u00e1gina em branco com uma refer\u00eancia para um arquivo javascript e ap\u00f3s o carregamento desse arquivo todos os elementos s\u00e3o exibidos na tela, por\u00e9m quando o acesso \u00e9 feito com o javascript desabilitado, ou com um navegador n\u00e3o suportado originalmente, a p\u00e1gina n\u00e3o ser\u00e1 exibida ou pode apresentar alguma inconsist\u00eancia devido ao navegador lidar de forma diferente com o c\u00f3digo javascript.<\/p>\n<p>Um <i>Server Side Renderer<\/i> (renderizador no lado do servidor) resolve esse problema de uma forma bastante simples e inteligente, ele fica no meio do caminho entre o usu\u00e1rio ou mecanismo de busca e o seu site, e quando o acesso vem de algu\u00e9m com um navegador incompat\u00edvel, mecanismo de busca ou usu\u00e1rio sem javascript o SSR que realiza ao seu SPA, aguarda os download e exibi\u00e7\u00e3o dos elementos visuais do site e entrega o resultado final para o navegador do usu\u00e1rio, ent\u00e3o garantimos que nosso SPA ser\u00e1 exibido da mesma forma para todos que acessam o site e que os mecanismos de busca, garantindo assim um \u00f3timo rank de SEO para o SPA.<\/p>\n<p>Para exemplificar o funcionamento acima, podemos tomar como base a imagem abaixo:<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-22938 size-full\" src=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2020\/09\/vue-js-e-nuxt-js.png\" alt=\"Como utilizar Vue.js e Nuxt.js para construir universal apps\" width=\"589\" height=\"402\" title=\"\" srcset=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2020\/09\/vue-js-e-nuxt-js.png 589w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2020\/09\/vue-js-e-nuxt-js-300x205.png 300w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2020\/09\/vue-js-e-nuxt-js-400x273.png 400w\" sizes=\"(max-width: 589px) 100vw, 589px\" \/><\/p>\n<p>Mas um SSR n\u00e3o faz somente isso, \u00e9 poss\u00edvel realizar in\u00fameras outras tarefas com um SSR, como por exemplo gerar um cache da sua p\u00e1gina e aumentar ainda mais a velocidade de navega\u00e7\u00e3o dos seus visitantes.<\/p>\n<h3><b>Muito legal, mas como que isso funciona na pr\u00e1tica?<\/b><\/h3>\n<p>A cria\u00e7\u00e3o de um SPA com o Nuxt.js \u00e9 bastante simples, o primeiro passo \u00e9 utilizar o npx para criar o esqueleto:<\/p>\n<p><code>npx create-nuxt-app testapp<\/code><\/p>\n<p>Depois j\u00e1 estamos aptos para realizar o build e iniciar o servidor e o SPA que vem embarcado como Nuxt.js.<\/p>\n<p><code>npm run build<\/code><\/p>\n<p>Agora acessando <a href=\"http:\/\/localhost:3000\" target=\"_blank\" rel=\"noopener\">http:\/\/localhost:3000<\/a> podemos ver a tela inicial do Nuxt.js.<\/p>\n<p>E isso \u00e9 s\u00f3 o come\u00e7o, \u00e9 poss\u00edvel criar qualquer coisa com essa combina\u00e7\u00e3o de Vue.js e Nuxt.js, e o melhor \u00e9 que a <a href=\"https:\/\/br.vuejs.org\/v2\/guide\/index.html\" target=\"_blank\" rel=\"noopener\">documenta\u00e7\u00e3o do Vue.js<\/a> est\u00e1 traduzida para portugu\u00eas brasileiro.<\/p>\n<p>Se voc\u00ea gostou do que foi apresentado nesse artigo, pode <a href=\"https:\/\/youtu.be\/uT4OC4lQxO0\" target=\"_blank\" rel=\"noopener\">assistir a palestra do Erick Petrucelli no Conex\u00e3o KingHost<\/a> para aprender mais sobre SPA, SSRs, Vue.js e Nuxt.js para construir aplica\u00e7\u00f5es ainda melhores \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quer saber o que s\u00e3o 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\u00e7\u00e3o das t\u00e9cnicas e paradigmas de desenvolvimento uma nova estrutura de desenvolvimento que tenta resolver problemas antigos e com foco em melhorar a experi\u00eancia do usu\u00e1rio, [&hellip;]<\/p>\n","protected":false},"author":343,"featured_media":22955,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[156],"tags":[1376],"class_list":["post-22937","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriais","tag-desenvolvimento"],"_links":{"self":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/22937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/users\/343"}],"replies":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/comments?post=22937"}],"version-history":[{"count":6,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/22937\/revisions"}],"predecessor-version":[{"id":36401,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/22937\/revisions\/36401"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media\/22955"}],"wp:attachment":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media?parent=22937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/categories?post=22937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/tags?post=22937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}