Introdução à Navegação no NextJS

Nesta seção do tutorial, vamos falar sobre o funcionamento de links no NextJS.

Para começar, vamos discutir o que há de tão especial nos links. Vamos olhar para eles nas diferentes abordagens de criação de sites.

Site em React

Suponha que você tenha um site em React. Como se sabe, React representa um SPA - um site no qual o usuário sempre permanece em uma única página. Você pode conectar React Router e o usuário vai pensar que está navegando por páginas diferentes, enquanto fisicamente permanece em um único arquivo.

Com isso, o usuário vai clicar nos links, vai parecer para ele que está acessando outra página, mas a página do site no navegador não será recarregada - o React formará dinamicamente o que o usuário vê na tela.

Nesse esquema, o usuário recebe o layout do site ao acessar a página pela primeira vez, e depois as partes do site simplesmente mudam via JavaScript. Ao mesmo tempo, o site pode solicitar dados do servidor via AJAX.

Essa abordagem reduz a carga no hospedagem (cujos recursos custam nosso dinheiro), bem como a carga no canal de internet do usuário.

Mas essa abordagem tem uma desvantagem - o problema de SEO. Parece que o site tem um conjunto de links, e na barra de endereço algo muda, e até é possível compartilhar um link para uma página específica do site via mensageiro. No entanto, o conteúdo da página é formado dinamicamente no cliente e os mecanismos de busca não são capazes de processar isso. Portanto, esse site não será promovido.

Nem todos os sites, no entanto, são destinados para promoção em mecanismos de busca. E se o seu não é, então esse esquema é bastante funcional para você.

Site no Backend

Suponha que seu site seja feito em uma das linguagens de backend. Por exemplo, em PHP.

Nesse caso, quando o usuário clicar nos links, a página do site será carregada por completo todas as vezes.

O problema é que uma parte substancial da página já está com o usuário. Pois, como você já sabe, na página geralmente apenas o conteúdo e os metadados mudam, e todo o resto permanece inalterado.

Por que baixar o resto, se apenas o conteúdo mudou? Isso cria uma carga maior no servidor e no canal de internet.

Há ainda outro problema. Suponha que na página, que recebemos, no conteúdo esteja disposta uma lista de produtos, como numa loja online. Obviamente, cada produto tem a mesma estrutura de marcação. Seria mais otimizado baixar apenas os dados dos produtos, e o template de exibição do produto. E então, no cliente, exibir cada produto nesse template. Mas nós baixamos os produtos juntamente com a marcação repetida do produto.

Resumindo, se temos um site em backend puro, enviamos pela rede muitos dados desnecessários.

No entanto, nesse caso não temos problemas com SEO. Para a URL solicitada, sempre é retornado um conteúdo estático, compreensível para os mecanismos de busca.

Site em NextJS

O NextJS combina ambas as abordagens. Quando o usuário digita a URL diretamente na barra de endereços, ele recebe em resposta o conteúdo estático da página.

Quando o usuário começa a clicar nos links do nosso site, a página do site não é atualizada por completo, mas sim os dados necessários são carregados via AJAX.

Quando o mecanismo de busca navega pelo nosso site, ele vê o conteúdo estático de que precisa. E quando o usuário navega pelo nosso site, nosso site começa a se comportar como um SPA.

E, o mais importante, o NextJS faz tudo isso automaticamente! Nós não precisamos nos preocupar com isso - ele fará tudo sozinho. Beleza!

Nas próximas lições, vamos entender como fazer o NextJS funcionar da maneira descrita.