O que é o NextJS?

Foi criado pela Vercel , e diferente do React que é uma biblioteca Javascript para construção de interfaces, o NextJS é um framework React. Logo, ele adiciona diferentes funcionalidades e padrões já estabelecidos para o seu desenvolvimento.

Lib(Biblioteca) x Framework?

Resumindo de forma rápida as diferenças entre uma lib e um framework são que com uma biblioteca(lib) o dev tem uma liberdade maior pois é criado mais a base, tendo assim mais controle, já no framework existe toda uma estrutura pronta ou pré definida para utilizar e seguir no desenvolvimento. Claro que não significa necessariamente que um é melhor do que o outro, são ferramentas diferentes com propósitos diferentes.

Qual o objetivo do NextJS?

O framework foi construído com inicialmente com dois objetivos principais que foram melhorar performance das aplicações React e solucionar uma grande dor de cabeça que a “Era das aplicações SPAs (Single Page Application)” gerou que é o problema de indexação nos motores de busca, o famoso SEO (Search Engine Optimization).

Os problemas de indexação no React

Pra explicar melhor a solução que o NextJS trouxe em relação a otimização do SEO, é necessário entender o cenário atual que o React cria já que ele veio justamente para solucionar tais problemas gerados pelo próprio. Como as aplicações que chamamos de SPA (Single Page Aplication) funcionam hoje? A estrutura se trata de uma clássica comunicação entre cliente e servidor em que o Cliente seria o nosso browser, indicado no canto inferior esquerdo, que usando o código react geraria o nosso bundle javascript para que seja possivel mostrar na interface determinadas informações. Essas informações dinâmicas são obtidas mediante uma requisição para uma API (Backend) e ele retorna como resposta todos dados requisitados sendo elas mais novas ou que sofreram alguma alteração. Nesse exemplo da imagem, é requisitado uma lista de usuários e a API devolve em formatoJSON como resposta. Logo depois é gerado toda a interface para listar esses usuários que o cliente final irá exibir.

O problema desse metodologia é que a página fica totalmente dependente do javascript pra que o conteúdo seja gerado na página. Já que o próprio é a chave para gerar o HTML contendo todas essas informações da página. Por consequência, quando algum motor de busca ou crawler tentar indexar uma página feita em React, geralmente ele não vai esperar que nossa aplicação faça o carregamento do Javascript, todas as chamadas à API e a construção do HTML de toda a página pra fazer este trabalho. Ou seja, essa busca se retorna vazia ou sem as informações relevantes para que nossa aplicação consiga ser indexada no Google da melhor maneira. E dependendo da aplicaçao isso pode ser um grande problema pro crescimento de um produto, como por exemplo um e-commerce ou um site de venda de imóveis que obviamente se beneficiariam fortemente com motores de busca. O ideal é que quando alguem procurar por algum produto ou um imóvel seu produto apareça ali na busca sendo o principal resultado ou pelo menos um dos principais resultados da busca.

A Solução: SSR (Server Side Rendering)

Para gerar toda a página pro browser, o NextJS utiliza de um servidor Node.js que se torna ali um intermediario importante dentro desse fluxo mostrado anteriormente, sendo responsável de renderizar dentro dele e retornar para cliente tudo pronto. Então a mudança no fluxo é que agora entre o cliente o servidor, a gente vamos ter o NextJS que recebe a requisicao do cliente, fica responsavel de pegar aquele código em React que vai fazer todas as chamadas à API e depois ele mesmo vai montar todo o conteúdo, ou seja, todo o HTML, CSS e Javascript tudo pronto e entregar pro nosso usuário final no browser. Dessa maneira, quando carrega nossa página no browser ele já carrega com todo o conteúdo que antes esperavamos o Javascript executar.

Para fins de indexação ele foi uma solução excelente, já que sempre vai ser indexado pelos motores de busca aqueles dados que antes só eram gerados dinamicamente após a execução de um código javascript. Esse comportamento que eles chamam Server-Side-Rendering ou Renderização do lado do servidor. A escolha obviamente pelo Node.JS é justamente por entender de forma nativa o Javascript.

Alguns exemplos de sites que utilizam Next.JS

• Vercel
• Twitch
• TikTok
• Magazine Luiza