Primeiro projeto com Next.js
Oi galera, tudo tranquilo? Me chamo João Paulo e sou desenvolvedor front-end no LABHacker. Vim aqui nesse texto contar um pouco mais sobre a minha primeira experiência utilizando NextJS em um projeto em produção.
Em abril de 2020 começamos uma primeira versão do painel da participação, um painel para mostrar o histórico de utilização dos canais de participação da Câmara dos Deputados.
Esse projeto foi desenvolvido em ReactJS e os dados eram consumidos diretamente das API’s disponíveis em tempo real, ou seja, em cada novo acesso ao sistema todos os dados eram obtidos no momento da requisição nas mais diversas API’s para que as visualizações fossem apresentadas aos usuários.
Para construir esse pequeno protótipo optamos por não alterar nenhuma API existente naquele momento, e utilizar essa aplicação para juntar os diversos dados somente no cliente do usuário.
Imagem representando as diversas fontes de dados da aplicação.
Após a construção desse protótipo observamos alguns pontos que precisariam ser melhorados, caso em outro momento esse projeto fosse utilizado em produção, e o principal deles era: o tempo para carregar os dados na tela do usuário.
Como optamos neste primeiro momento em não realizar modificações nas API’s existentes acabamos tendo que realizar as consultas somente com os parâmetros existentes. Isto fez com que fosse necessário percorrer as diversas páginas de uma API para obter os dados e depois realizar uma compilação dos mesmos, como por exemplo no caso da API de salas do Audiências Interativas era necessário percorrer mais de 10 páginas da API e em uma conexão razoável isso demandava quase um minuto para completar. Que problema para a experiência do usuário né?
Carregamento de uma das telas da primeira versão do protótipo.
Segue um registro das nossas API ‘s quando um usuário realizava um acesso nesse protótipo.
GIF retirado de: https://tenor.com/pbPa.gif
E também temos um registro exclusivo do cliente, browser do usuário, depois que as API’s finalizam a requisição de todos os dados solicitados:
E o usuário enquanto isso:
Brincadeiras a parte, observamos que existiam diversos pontos de melhoria e que seria necessário procurar alternativas para que isso não acontecesse novamente.
O Painel da Participação
No começo de 2021 retomamos esse projeto sob um novo nome, o Painel da Participação, onde agora este painel seria feito com um escopo reduzido somente duas ferramentas do e-Democracia: Audiências Interativas e o Wikilegis. Este projeto teria os dados demonstrados por meio de gráficos e tabelas, e as visualizações seriam apresentados com os dados recortados de acordo com períodos pré-definidos (diário, mensal, anual).
Com a retomada do projeto, acabamos retomando os problemas juntos, e assim começamos a buscar soluções para que os problemas elencados e identificados anteriormente não ocorressem novamente nessa aplicação que seria disponibilizada para a sociedade ao término do projeto.
Chegamos à seguinte conclusão: vamos fazer um cache desses dados no servidor e retornar todos esses dados de uma vez em um JSON! Porém logo em seguida tivemos o seguinte questionamento: ter o cache dos dados faria a requisição ser mais rápida porém isso não a tornaria mais pesada? E sim, tornaria o payload bem mais pesado. Resolvemos um problema e criamos outro.
E voltamos assim à fase de pesquisa.
O Next.JS
Entre as minhas pesquisas para solucionar o problema na camada de Front-end acabei chegando ao framework NextJS, que era um framework construído em cima do ReactJS e trazia um conjunto de funcionalidades não presentes na biblioteca com uma ótima experiência para o desenvolvedor. Enquanto lia a documentação e as funcionalidades comecei a ter a impressão que o framework tinha até sido feito especificamente para o nosso projeto, pois trazia soluções perfeitas para os problemas que teríamos que enfrentar.
Entre as funcionalidades que o NextJS listava temos: renderização no servidor, geração de páginas estáticas, CSS-in-JS, pré-configurações, performance, cache e tudo isso feito com uma ótima experiência para desenvolvimento.
Mas antes de continuar contando como o NextJS ajudou nosso projeto, é importante explicar o que ele é e como funciona!
O NextJS é um Framework Web desenvolvido em ReactJS lançado em 2016 por Guillhermo Rouch (Confundador da empresa Vercel), e hoje é mantido por esta empresa em conjunto com a comunidade open-source. O framework tem como objetivo agilizar o processo de construção de um app ReactJS oferecendo configurações de rotas por componentes, suporte a SSR (Server Side Rendering), transpilação de ES6 e ES7 e que incluem recursos como async e await.
Muitas funcionalidades do NextJS são mais perceptíveis nas aplicações em produção, pois o Next possui dois pontos principais em seu objetivo: tornar nossa aplicação React mais performática e a facilitar a indexação do conteúdo da página pelos motores de busca.
Sobre esse ponto da indexação, quando desenvolvemos nossas aplicações da maneira tradicional com React, toda nossa interface e toda chamada à API se faz pelo lado do cliente (browser). Então, quando algum motor de busca ou crawler tentar indexar uma página feita em React, geralmente não vai esperar que nossa aplicação faça o carregamento do Javascript, chamadas à API e toda a construção da página. Ou seja, essa busca retorna vazia ou sem as informações mais relevantes para que nossa aplicação consiga ser indexada.
Onde o Next.js se encaixa nesse cenário? Para gerar toda a página para o browser, o Next utiliza um servidor Node.js. Usa-se Node.js nesse cenário apenas por entender Javascript nativamente. Dessa forma, o Next consegue entregar a página pronta para o Browser, ou seja, todo o HTML, CSS e Javascript. Esse comportamento chama-se Server-Side-Rendering.
Com essa funcionalidade, a página é retornada para o usuário toda montada. Pensando que esse usuário seja um motor de busca, todo o conteúdo da página retorna, dispondo conteúdo para ser indexado.
E foi exatamente essa funcionalidade que exploramos em nosso projeto para resolver esse projeto. Mas vamos falar mais sobre isso a frente.
Para quase finalizar esse tópico sobre o Next e voltar ao projeto entre algumas das características do framework podemos elencar:
- Suporte a Server Side Rendering, permitindo que as aplicações sejam renderizadas pelo servidor em vez do browser como em aplicações ReactJS;
- Geração de sites estáticos;
- Suporte ao TypeScript nativamente;
- Sistema de rotas pré configurado;
- Permite criar aplicações em diferentes idiomas e traduzi-las em tempo real utilizando a internacionalização;
- CSS modularizado, com suporte a CSS-in-JS;
- Fast Refresh no desenvolvimento (atualiza os elementos da página rapidamente sem recarregar o navegador, mantendo o valor das variáveis);
- Separa o código para que seja carregado apenas o necessário, otimizando a aplicação;
Você pode estar se perguntando nesse momento: e alguém usa esse tal Next.js com tantas funcionalidades em produção? E a resposta é Sim! Para responder melhor essa pergunta um GIF vale mais que mil palavras.
Para saber mais sobre o Nextjs, outras funcionalidades, como usar, casos de uso e etc acesse o site oficial e conheça mais sobre o framework: https://nextjs.org/
Voltando ao Painel da Participação
Como mostrei a primeira versão do painel acabou sendo um grande laboratório, um momento em que visualizamos os problemas, pontos de melhoria. Utilizando esses insumos e os resultados das pesquisas passamos a debater sobre como poderíamos otimizar e atingir o máximo de requisitos descritos no documento visão.
Após estes debates e pesquisas chegamos as seguintes conclusões que seriam implementadas:
- Cache dos dados em duas camadas: no front-end e no back-end;
- No front-end seria feito um cache diário dos dados correspondentes a visualização padrão do painel, que corresponde a visualização de todo o período apresentado em uma granularidade anual.
- O back-end da aplicação, escrito em python Django, iria realizar uma consolidação diária dos dados e disponibilizá-los por meio das API’s com a possibilidade de utilizar diversos filtros para otimização da busca;
Talvez você esteja pensando como assim um cache no front-end? Como isso funciona? É um arquivo JSON(JavaScript Object Notation)? E aresposta dessas perguntas estão diretamente ligadas ao uso do Next.js nesse projeto.
O Next.js tem a pré-renderização do lado do servidor disponível, o que faz com que no lugar do trabalho ser feito do lado do cliente(navegador do usuário) o servidor é responsável por servir essa página ao cliente de forma estática ou dinâmica.
“Por padrão, Next.js pré-renderiza todas as páginas. Isso significa que Next.js gera HTML para cada página com antecedência, em vez de ter tudo feito pelo JavaScript do lado do cliente. A pré-renderização pode resultar em melhor desempenho e SEO.
Cada HTML gerado é associado ao código JavaScript mínimo necessário para essa página. Quando uma página é carregada pelo navegador, seu código JavaScript é executado e torna a página totalmente interativa. (Este processo é chamado de hidratação.)”
Sendo assim todas as requisições agora são feitas do lado do servidor e é servido ao cliente uma página com todos esses dados já compilados e o HTML montado. Esses dados são guardados em um cache, sendo montado facilmente com as funções disponibilizadas pelo Next.js, como getStaticProps e getServerSideProps , e atualizados de acordo com parâmetros configurados pelo desenvolvedor.
A cada novo acesso de um usuário o servidor da aplicação confere quando foi realizado a última consulta aos dados e caso esse intervalo seja maior que o refresh time definido os dados mais recentes são buscados e atualizados. Caso ocorra algum erro na obtenção desses dados o cache anterior é mantido.
Fazendo assim que a página seja servida ao usuário com todos os dados compilados em questão de poucos segundos em vez de quase um minuto quando comparado com o primeiro protótipo.
Muito parecido com um servidor back-end dentro do front-end né? E parece muito isso mesmo.
Não vou entrar em como utilizar cada uma das funções ou entrar em uma parte técnica de como “codar” utilizando o NextJs. Mas caso tenha interesse recomendo que acesse a documentação deles, ela é bem completa e possui muitas referências com exemplos em código que tornam a compreensão de cada uma das funcionalidades disponíveis bem simples.
Por hoje fico por aqui e caso tenha mais interesse nesse projeto e no código fonte dele acesse o repositório desse projeto no nosso Github, https://github.com/labhackercd/painel-da-participacao . Até mais :D
