ContentList: utilizar Link do Next.js junto com uma barra de carregamento para abertura instantânea da página

[filipedeschamps]

Contexto

Hoje, cada link que é clicado no TabNews faz ele abrir uma página nova, do zero, no sentido de que o link que é clicado descarrega a página anterior e carrega uma nova, do zero, recebendo o HTML inteiro, fazendo o parsing, depois puxando os estáticos em js, parsing disso também, bootstrap do framework, e a lista vai indo.

Para evitar isso, o Next.js fornece um componente chamado Link, que consegue transformar a mecânica da página em uma SPA e carregando apenas o que precisa para abrir a nova página, evitando todos os passos que foram mencionados anteriormente, fora conseguir antecipar o carregamento do conteúdo seguinte ao passar o mouse em cima dos links que o usuário supostamente irá abrir.

Como isso pode ser uma alteração agressiva, vamos dar um passo de cada vez e implementar apenas no componente ContentList.

Execução

• feat(header contentlist): using next/link and next/router #516
• ContentList: utiliza Link do Next.js junto com uma barra de carregamento #616