Como o Next.js acelera as navegações com a pré-busca de rotas e como ela pode ser personalizada.
O que você aprenderá?
Nesta postagem, você vai aprender como funciona o cálculo de rotas no Next.js, como ele é otimizado para ter mais velocidade e como personalizá-lo para que atenda às suas necessidades.
O componente <Link>
No Next.js, não é preciso configurar o roteamento manualmente.
O Next.js usa roteamento com base no sistema de arquivos, o que permite criar apenas arquivos e pastas
dentro do diretório ./pages/:
Para vincular a páginas diferentes, use o componente
<Link>, da mesma forma que você
usaria o bom e antigo 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 para você. Normalmente, é feito o download de uma página quando você segue um link para ela, mas o Next.js faz a pré-busca automática do JavaScript necessário para renderizar a página.
Quando você carrega uma página com alguns links, é provável que o componente por trás dele já tenha sido buscado. Isso melhora a capacidade de resposta do aplicativo, tornando as navegações para novas páginas mais rápidas.
No app de exemplo abaixo, a página index.js é vinculada a margherita.js com um
<Link>:
Use o Chrome DevTools para verificar se margherita.js é pré-buscado:
1. Para visualizar o site, pressione Ver app. Em seguida, pressione
Tela cheia
.
- Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
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. Ela também desativa a pré-busca quando a conexão de rede está lenta
ou quando os usuários têm
Save-Data
ativado. Com base nessas verificações, o Next.js injeta tags <link
rel="preload"> dinamicamente para fazer o download de componentes para
navegações subsequentes.
O Next.js apenas busca o JavaScript. Ele não o executa. Dessa forma, não há o download de nenhum conteúdo adicional que a página pré-buscada possa solicitar até que você visite o link.
Evitar a pré-busca desnecessária
Para evitar o download de conteúdo desnecessário, defina a propriedade prefetch em <Link> como false para desativar a pré-busca de páginas raramente visitadas:
<Link href="/pineapple-pizza" prefetch={false}>
<a>Pineapple pizza</a>
</Link>
Nesse segundo app de exemplo, a página index.js tem um <Link> a
pineapple-pizza.js com prefetch definido como false:
Para inspecionar a atividade de rede, siga as etapas do primeiro exemplo. Ao
carregar index.js, a guia Rede do DevTools mostra que o download de margherita.js foi
feito, 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 esse processo com a
API Router 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, também é possível adicionar a pré-busca a eles.
Para implementar a pré-busca no código de roteamento, use o método prefetch de
useRouter.
Confira components/MyLink.js neste app de exemplo:
A pré-busca é feita dentro do 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ê clicar no link, o trajeto será feito em handleClick. Uma mensagem é registrada no console, e o método push navega para 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 Rede mostra que o download de margherita.js foi
feito e que pineapple-pizza.js não foi:
Quando você clica em um dos links, o Console registra a mensagem "Diversão com o Next.js" e navega para a nova rota:
Conclusão
Quando você usa <Link>, o Next.js pré-busca automaticamente o JavaScript necessário para renderizar a página vinculada, o que agiliza a navegação para novas páginas. Se você estiver usando o roteamento personalizado, poderá utilizar a API do roteador Next.js para implementar a pré-busca por conta própria. Evite fazer o download de conteúdo desnecessariamente desativando a pré-busca de páginas raramente visitadas.