Como o Next.js acelera a navegação com o pré-carregamento de rotas e como personalizar essa funcionalidade.
O que você aprenderá?
Neste post, você vai aprender como o roteamento funciona no Next.js, como ele é otimizado para velocidade e como personalizá-lo para atender melhor às suas necessidades.
O componente <Link>
No Next.js, você não precisa configurar o roteamento manualmente.
O Next.js usa o roteamento baseado no sistema de arquivos, que permite criar arquivos e pastas
no diretório ./pages/:
Para vincular a páginas diferentes, use o componente
<Link>, de forma semelhante a como você
usaria o elemento <a>:
<Link href="/margherita">
<a>Margherita</a>
</Link>
Quando você usa o componente <Link> para navegação, o Next.js faz um pouco
mais por você. Normalmente, uma página é transferida por download quando você clica em um link, mas
o Next.js faz o pré-carregamento automático do JavaScript necessário para renderizar a página.
Quando você carrega uma página com alguns links, é provável que, quando você clicar em um link, o componente por trás dele já tenha sido buscado. Isso melhora a capacidade de resposta do aplicativo, tornando a navegação para novas páginas mais rápida.
No exemplo de app abaixo, a página index.js tem um link para margherita.js com um
<Link>:
Use o Chrome DevTools para verificar se o margherita.js está sendo pré-buscado:
1. Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen
.
- Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
Clique na guia Rede.
Marque a caixa de seleção Desativar cache.
Recarregue a página.
Quando você carrega index.js, a guia Rede mostra que margherita.js também foi
transferido por download:
Como a pré-busca automática funciona
O Next.js faz a pré-busca apenas dos links que aparecem na janela de visualização e usa a API Intersection
Observer
para detectá-los. Ele também desativa a pré-busca quando a conexão de rede está lenta
ou quando os usuários têm o
Save-Data
ativado. Com base nessas verificações, o Next.js injeta dinamicamente tags <link
rel="preload"> para fazer o download de componentes para
navegações subsequentes.
O Next.js só busca o JavaScript, não o executa. Dessa forma, ele não faz o download de nenhum conteúdo adicional que a página pré-buscada possa solicitar até que você acesse o link.
Evite a pré-busca desnecessária
Para evitar o download de conteúdo desnecessário, desative a pré-busca para páginas raramente
visitadas definindo a propriedade prefetch em <Link> como false:
<Link href="/pineapple-pizza" prefetch={false}>
<a>Pineapple pizza</a>
</Link>
Neste segundo app de exemplo, a página index.js tem um <Link> para
pineapple-pizza.js com prefetch definido como false:
Para inspecionar a atividade de rede, siga as etapas do primeiro exemplo. Quando
você carrega index.js, a guia Rede do DevTools mostra que margherita.js é
transferido por download, mas pineapple-pizza.js não:
Pré-busca com roteamento personalizado
O componente <Link> é adequado para a maioria dos casos de uso, mas você também pode criar
seu próprio componente para fazer o roteamento. O Next.js facilita isso com a
API do roteador disponível em next/router.
Se você quiser fazer algo (por exemplo, enviar um formulário) antes de navegar para uma nova rota, defina isso no código de roteamento personalizado.
Ao usar componentes personalizados para roteamento, você também pode adicionar o pré-carregamento a eles.
Para implementar o pré-carregamento no código de roteamento, use o método prefetch de
useRouter.
Confira o components/MyLink.js neste app de exemplo:
A pré-busca é feita no hook
useEffect. Se a propriedade prefetch em um <MyLink> for definida como true, a rota especificada na propriedade href será pré-buscada quando esse <MyLink> for renderizado:
useEffect(() => {
if (prefetch) router.prefetch(href)
});
Quando você clica no link, o roteamento é feito em handleClick. Uma mensagem é
registrada no console, e o método push navega até a nova rota
especificada em href:
const handleClick = e => {
e.preventDefault();
console.log("Having fun with Next.js.");
router.push(href);
};
Neste app de exemplo, a página index.js tem um <MyLink> para margherita.js e
pineapple-pizza.js. A propriedade prefetch está definida como true em /margherita e como false em /pineapple-pizza.
<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza" title="Pineapple pizza" prefetch={false} />
Quando você carrega index.js, a guia Network mostra que margherita.js foi
transferido por download, mas pineapple-pizza.js não:
Quando você clica em qualquer um dos links, o console registra "Having fun with Next.js" e navega para a nova rota:
Conclusão
Quando você usa <Link>, o Next.js faz a pré-busca automática do JavaScript necessário para
renderizar a página vinculada, o que torna a navegação para novas páginas mais rápida. Se você estiver
usando o roteamento personalizado, poderá usar a API do roteador Next.js para implementar
a pré-busca por conta própria. Evite o download de conteúdo desnecessariamente desativando
a pré-busca de páginas raramente visitadas.