Olá cara, tudo bem?
Desculpe a minha ignorância, talvez eu não tenha entendido direito o proposito ou o problema que você está tentando resolver.
Mas, isso não seria o mesmo que usar o novo loading.tsx do Next.js com um <Suspense>?
Fora que, da forma como você esta fazendo, com uma função changeRoute em um <button>, talvez você esteja perdendo uma das melhores funcionalidades do Next, que é o next/link com <Link/>. Com ele o Next não recarrega a próxima página integralmente, só carrega os chunks necessários e recicla o que já foi baixado e carregado e que na próxima página é igual, reduzinho rede e tempo de carregamento.
Fora que, com o next/link, todos os link que estão na rolagem atual, já são pré-carregados e pré-renderizados em background, para quando algum for clicado, nem dê tempo de aparecer loader nem ver renderização nenhuma, a página nova já explode pronta na tela.
Como disse, não sei se entendi direito seu problema, mas espero ter contribuído para o assunto.
Abraco, TMJ!
Opa, estou bem e você? Gostei dos questionamentos, espero que consiga te ajudar a entender!
Na verdade não seria o mesmo que loading.tsx. O loading é um carregamento 'dentro' do arquivo que você quer renderizar, geralmente usado quado o arquivo ainda não terminou de ser montado completamente.
O objetivo da minha lib é lidar com a transição das rotas!
Quando se clica em um <Link /> apesar de ser rapido as vezes, ainda pode ou não ter delay, e é nesse caso que se faz necessário uma animação de loading/progress loading, por exemplo.
Agora a outra duvida sobre performace, e tall... Atualmente no Next.js existem algumas formas de você acessar uma rota:
- Digitando a url
- Fazendo o direcionamento com a tag
- Fazendo o uso do hook useRouter()
O que minha biblioteca faz é monitorar quando uma tag link é clicada no seu projeto, por isso ela á iria funcionar 'sempre'.
E quando eu registro um <ContainerLink />, seja em uma rota especifica, ou seja globalmente, tudo o que estou fazendo é criando todos os que você disse precisar.
Então isso não atrapalha o recurso PREFETCH do Next.Js, já que as rotas já estão disponiveis no seu navegador, em algum lugar.
Tudo que o changeRoute() irá fazer é apenas chamar um evento para clicar naquele link que tu queria, de uma meneira bem facilitada.
Então, na verdade a minha lib não atrapalha a performace, ela até melhora se parar para pensar!
O atual useRouter() oferece uma maneira de mudar rotas, mas nenhuma animação aparece na tela mostrando ao usuario que alguma coisa esta acontecendo, já que o recurso de eventos foi depreciado.
O que minha lib oferece com o changeRoute() é justamente isso, uma maneira de você poder transicionar de telas, susbistuindo muitos casos de uso do useRouter() para trocar de rota, e ainda ter uma animação.
Novamente dizendo, quando se registra um <ContainerLink /> é quando você quer chamar uma rota com changeRoute(), com a animação, sem ser diretamente atraves de um tag , que nesses casos, seria quando a pessoa faria o usuo do useRouter(). Chamando uma rota com função.
Realmente espero que consegui esclarecer suas dúvidas, mas se algo ainda ficou nebuloso. Pfv, me pergunte! Abraço