Primeiro Projeto com Next.js
Oi galera, tudo tranquilo? Me chamo João Paulo e fui até pouco tempo 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ãodo e-monitor, um painel criado 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. Sem nenhuma estratégia de cache desses dados em um servidor.
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. 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, acabamos tendo que realizar as consultas somente com os parâmetros existentes. Isso tornou necessário percorrer as diversas páginas de uma API para obter os dados e depois realizar uma compilação deles. No caso da API de salas da ferramenta Audiências Interativas, por exemplo, era necessário percorrer mais de 10 páginas, o que demandava quase um minuto para completar em uma conexão razoável. Que problema para a experiência do usuário né?
A seguir temos um registro exclusivo do cliente, browser do usuário, depois que as API’s finalizavam a requisição de todos os dados solicitados:
E o usuário enquanto isso:
Brincadeiras à parte, observamos que existiam diversos pontos de melhoria e que seria necessário procurar alternativas para que isso não acontecesse novamente.
O ressurgimento
No começo de 2021, retomamos o projeto do e-monitor, então com o nome Painel da Participação. O escopo foi reduzido a somente duas ferramentas do e-Democracia: Audiências Interativas e Wikilegis. Este projeto teria os dados demonstrados por meio de gráficos e tabelas, e as visualizações seriam apresentadas com os dados recortados de acordo com períodos pré-definidos (diário, mensal, anual).
Com a retomada do projeto, acabamos resgatando também as dificuldades, 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, mas 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 em sua documentação podemos listar: 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 os desenvolvedores.
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 (co-fundador 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 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 para resolver o problema nesse 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 outras 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 nativamente;
- 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? 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 explicado, a primeira versão do painel acabou sendo um grande laboratório, um momento em que visualizamos os problemas e 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 às 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 à visualização padrão do painel, que representa 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 a resposta dessas perguntas está diretamente ligada ao uso nesse projeto.
O Next.js tem a pré-renderização do lado do servidor disponível. Isso faz com que, no lugar do trabalho ser feito do lado do cliente (navegador do usuário), o servidor seja responsável por entregar essa página 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 realizada 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.
Fazemos, assim, com 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 no nosso Github, https://github.com/labhackercd/painel-da-participacao . Até mais :D
