Mais poder para desenvolver suas aplicações web, conheça o NuxtJS
Muito se fala em como podemos melhorar aspectos de desempenho e SEO de um site, mas o que precisamos de fato saber para deixarmos nossas aplicações com performances excelentes e SEO bem indexado ? Para responder essa pergunta, precisamos voltar no tempo e entender como as páginas web que hoje conhecemos eram renderizadas no navegador.
Servidor devolve tudo ao usuário
Há não muito tempo, o que tínhamos na web em sua maior parte, eram sites que faziam requisição ao servidor, e este devolvia todo o HTML para o browser. Por um lado isso é bom,mas por outro, a demora no processamento dos arquivos e no envio da resposta podia ser um agravante. Outro fator interessante, é a experiência do usuário, que não era muito boa, pois imagina que todas as vezes que o usuário fizesse uma nova requisição ao servidor, bastasse uma única alteração na tela, mesmo que pequena, para que toda a tela fosse recarregada novamente, trazendo novamente todo o conteúdo para tela do usuário.
SPA -O novo queridinho
Mediante esse cenário de servidor devolve tudo ao usuário, surge uma nova sigla, SPA — Single Page Applications, o que basicamente resolve essa questão de trazer tudo ao usuário de uma vez só. Com SPA, a requisição é feita uma vez, e o servidor devolve o que é preciso para renderizar a tela que o usuário está, caso haja uma única alteração na tela, não será necessário que o servidor traga tudo novamente, pois na primeira requisição, ele trará os “preloaders” que indica quais as próximas páginas deverão ser carregadas, dessa forma somente é alterado componente e/ou rotas, fazendo com a página não tenha o comportamento de recarregar, melhorando em muito a experiência do usuário.
Vue JS — Um framework com SPA embutido
Agora que entendemos como eram feitas as requisições, os problemas e as soluções, vamos ver rapidamente como fica o Vue no meio disso tudo. VueJS é um framework javascript com suporte Single Page Applications, o famoso SPA. Como ele você consegue implementar tranquilamente o comportamento de páginas SPAs, pois é nativo do framework esse comportamento.
O problema SPA
Como nem tudo na vida são flores, na programação também não é diferente. SPA resolveu um grande problema na web, em compensação trouxe outros problemas, como: performance imprevisível e dificuldade com SEO. Ao carregarmos uma página com apenas “pedaços” de HTML , caso tenhamos uma instabilidade na rede, somente algumas partes serão carregadas corretamente, provavelmente o CSS não será devidamente carregado, imagens etc, ocasionando em quebras no site.
SEO, é de comer ?
Outro grande problema que páginas SPAs não conseguem resolver (pelo menos não tão facilmente), é a questão de SEO — Search Engine Optimization, nada mais é do que o rankeamento do site quando o usuário pesquisa por palavras chaves no Google. Aquele site que estiver mais bem preparado quando o motor de pesquisa do Google varrê-lo será carregado como as principais opções para o usuário. E existem certos requisitos para que o Google exiba o site nas principais opções.
NuxtJS — Bem vindo(a) o maravilho mundo do SEO otimizado
NuxtJS é um framework para outro framework, no caso, VueJS. De forma resumida a mágica do NuxtJS é o servidor “embutido” nele. Como assim? NuxtJS possui um servidor node acoplado a sua estrutura, é o que chamamos de SSR — Server Side Render. Isso significa que podemos realizar renderização do nosso HTML/CSS/JS do lado do servidor. Isso te lembra alguma coisa? Exatamente, era como funcionava antes dos SPAs, “servidor renderiza tudo e devolve ao cliente” . Isso ajuda muito para que o motor(crawlers) do google ao varrer o site, possa enxergar a página já renderizada com tudo que precisa e indexa-lá na página de pesquisa.
Benefícios
Como o NuxtJS temos alguns benefícios:
- SSR : Server Side Render
- SSG : Static Site Generation
- SPA: Single Page Application
Cada benefício é voltado para o que você precisa. Se precisa que seu site tenha um SEO otimizado, utilize a opção SSR. Caso precise de um site com páginas estáticas ( que não sofrerão mudanças a todo momento), como um blog, utilize a opção SSG, agora caso você queira que o NuxtJS se comporte somente como SPA, também existe essa opção (ssr: false). Caso você deseje ter o melhor dos dois mundos juntos (SSR + SPA) fique tranquilo(a), pois por default quando criamos um projeto SSR, ele já é um projeto Universal APPs, ou seja, é um SSR com SPA.
Na imagem abaixo temos uma comparação de performance de um site feito com NuxtJS e outro utilizando apenas VueJS. É perceptível a diferença de performance.
A solução que o NuxtJS trouxe para um projeto real
Atualmente na equipe que trabalho, estamos na fase de migração do VueJS para NuxtJS. O problema que temos, e que com o NuxtJS isso será muito bem resolvido, é: uma parte do código contém um servidor node e o fato de precisarmos dinamizar os temas(CSS) de cada um dos temas que trabalhamos aqui. Esse último nada mais é do que para cada URL que passamos possui um tema diferente, fontes, cores, imagens etc. E fazer isso dinamicamente atualmente tem sido mais uma “gambiarra” do que uma solução elegante. A outra questão é o serviço em node que mantemos a parte para renderizar as meta tags do site.
No próximo artigo explico como você pode criar suas aplicações WEB utilizando esse poderoso framework.
Conclusão
A web como a conhecemos hoje, já teve boas mudanças, sempre procurando resolver problemas, mas nessa busca por resolvermos problemas podemos criar outros problemas. Páginas SPAs vieram para resolver um problema de requisição e processamento, porém deixou de lado algumas questões importantes como SEO. Para resolver isso agora temos o NuxtJS que permite a junção de SPA com SSR, o que traz muito mais poder para desenvolvermos nossas aplicações web.
