As vantagens do framework NextJs no Korok

Na Bessa usamos tecnologia de ponta para tornar possível uma contabilidade realmente digital feita por pessoas. O nosso sistema exclusivo Korok foi pensado para integrar de forma inteligente e responsiva vários sistemas para facilitar o trabalho de nossos especialistas e garantir informação útil e atualizada aos nossos clientes. Manter um site com essa qualidade, estabilidade e boa performance não é uma tarefa fácil e requer as ferramentas adequadas de desenvolvimento. Para isso escolhemos o framework NextJS para o Korok, e nesse artigo explicarei porque ele se tornou nosso aliado. Veja o glossário de expressões ao final do texto.

Quando o usuário abre uma página ou clica em um link, seu computador (o cliente) faz uma requisição ao servidor e recebe o conteúdo do site que é exibido no seu navegador. Esse conteúdo pode vir de forma pronta, já processada no servidor, ou pode conter ferramentas em código e dados para ser processada no cliente. O NextJS permite resolver de forma flexível essa questão fundamental do desenvolvimento web: Onde processar os dados antes de exibi-los para o usuário? Diferente de outras frameworks, onde predomina apenas uma estratégia de renderização; no cliente, ou no servidor, o que pode causar limitações de toda a lógica da aplicação, o Next combina diferentes variações de SSR e CSR. Nesse universo falaremos de dois recursos importantes, Server Components e o novo Partial Pre Rendering (ou PPR).

Como muitas vezes precisamos combinar dados com interatividade, escolher a melhor estratégia de renderização é crucial para a performance e atender aos requisitos. Ao desenvolver uma nova página, precisamos analisar seu conteúdo e objetivo e fazer algumas perguntas: Qual conteúdo precisa ser atualizado com frequência e qual não precisa? Essa página irá fazer uma grande consulta de dados e processamento? (algo bem comum em vários de nossos serviços) e Há elementos interativos? Às vezes uma forma de renderização vale para a página toda, mas frequentemente é mais vantajoso decidir por partes.

Server Components - Componentes do servidor

Por padrão, o NextJS busca renderizar tudo no servidor (daí o nome componentes do servidor). Isso é muito bom, pois temos várias vantagens neste modelo de renderização como velocidade de carregamento e estabilidade, portanto essa é nossa preferência sempre que criamos um novo recurso para o Korok. Dentro desse modelo, existem a forma estática, onde a página é renderizada no momento de construir a aplicação e a dinâmica, onde a renderização acontece no momento que você acessa o recurso e leva um pouco mais de tempo para chegar ao seu computador comparada à forma estática. A forma dinâmica é necessária para conteúdos que são personalizados, como a maioria das nossas páginas contêm informações específicas para o usuário naquele momento, a forma dinâmica acaba sendo o padrão em quase todas as páginas do Korok. O Next não precisa escolher sozinho onde renderizar, e nós desenvolvedores podemos optar que um recurso seja renderizado no cliente em casos específicos ou demarcar de forma granulada apenas alguns elementos da página que precisamos que sejam renderizados no cliente e o Next renderiza todo o resto no servidor. Fazer essa distinção é um fator crucial para obter a melhor performance.

Uma das formas de definir demarcadores dentro da página é usando o Suspense e fallback, que serve para basicamente dizer ao Next que aquela informação deve ser renderizada depois. O suspense é o delimitador, e o conteúdo mostrado temporariamente dentro do Suspense é o fallback enquanto o que realmente queremos exibir é processado paralelamente sem travar o carregamento da aplicação. Vale lembrar das server actions, que são funções executadas no servidor e que podem ser chamadas dos componentes do cliente, com tipagem e segurança, uma inovação comparada ao modelo antigo de requisições. Toda essa gama de possibilidades do Next nos permite criar no Korok páginas rápidas, interativas com menos complexidade de código, tipagem persistente e que são renderizadas sempre no servidor preferencialmente tendo seus elementos interativos ou mais demorados carregados após a estrutura geral, apenas quando necessário.

Outras vantagens dos componentes do servidor bem definidos incluem SEO e a segurança, que é fundamental ao lidar com informações financeiras e dados pessoais e comerciais. Nosso back end inclui um middleware de autenticação com permissões que é executado no servidor no momento da requisição, e isso garante a segurança e consistência dos dados.

Partial Pre Rendering (PPR) - Pré-renderização parcial

Para somar às funções já descritas previamente e melhorar ainda mais a performance garantindo uma geração mais estática, o Next versão 14 introduziu no final de 2023 a função experimental Partial Pre Rendering, que já estamos introduzindo no Korok com toda segurança. Essa função utiliza os recursos React Concurrency, edge computing e a mesma API descrita anteriormente do Suspense e fallback, onde definimos uma porção do conteúdo que será renderizada dinamicamente por streaming, e cuida de renderizar todo o restante da página (isso inclui o fallback) durante o momento de build da aplicação, de forma estática, daí o nome pré- renderizar, em contraposição a renderizar no momento que o usuário faz a requisição (renderização dinâmica no servidor). Isso viabiliza deixar o conteúdo estático pré-renderizado mais próximo do computador do usuário através de edge computing e reduzir ainda mais o tempo das requisições.

Um exemplo de uso é em nossa tela de notas fiscais. O Korok exibe informações sobre notas fiscais e faz diversas checagens paralelamente. Há etapas de renderização/processamento diferentes para cada grupo de elementos; os elementos estáticos como menu, links, style sheets de css etc são pré-renderizados em um shell e disponibilizados para o usuário prontamente através de edge computing, os dados com informações de identificação são buscados em nossos servidores na hora da requisição após autenticação e adicionados ao shell, e as checagens, que são mais demoradas, são feitas posteriormente e inseridas por último através de streaming. Tudo isso de forma que o usuário não precise esperar olhando para uma página branca carregando. O PPR é a nova forma de unir os melhores pontos de ISR e renderização no servidor, e promete se tornar mais uma função padrão no futuro próximo, tal como aconteceu com as server actions.

Com toda essa tecnologia oferecida pelo NextJS no Korok, nossa equipe tem uma melhor estrutura para prestar um serviço contábil e de consultoria com as informações mais rápidas, inteligentes e precisas, sem travar seu computador e economizando seu tempo.

Glossário

Cliente: Refere-se ao navegador ou dispositivo utilizado pelo usuário para acessar e interagir com uma aplicação ou página web.

CSR (Client-Side Rendering): Renderização no cliente: Processo de renderização de páginas no navegador do usuário usando JavaScript, permitindo interatividade dinâmica.

Framework: Estrutura de trabalho com ferramentas, bibliotecas e padrões de design para facilitar o desenvolvimento de software.

Requisição: Uma solicitação de dados feita pelo cliente ao servidor, que pode conter dados.

Renderizar: Gerar visualização final a partir de dados ou código-fonte para exibir conteúdo em uma página web ou aplicação.

Servidor: Um computador ou sistema que fornece dados, recursos ou serviços para outros dispositivos, como clientes.

Shell: Em um contexto de desenvolvimento web, refere-se a uma estrutura básica ou esqueleto de uma página ou aplicação antes que o conteúdo específico seja inserido.

SSR (Server-Side Rendering): Renderização no servidor: Processo de renderização de páginas no servidor antes de serem enviadas ao navegador, resultando em tempos de carregamento mais rápidos.

Tipagem: Processo de atribuir tipos de dados a variáveis e elementos em um código de programação, ajudando na detecção de erros e na manutenção do código.