Pré-busca de rotas no Next.js

Como o Next.js acelera as navegações com a pré-busca de rotas e como personalizar isso.

Milica Mihajlija

Nesta postagem, 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.

Atenção: esta página tem uma ou mais demonstrações corrompidas porque o Glitch encerrou a hospedagem.

O componente <Link>

No Next.js, não é necessário configurar o roteamento manualmente. O Next.js usa roteamento baseado em sistema de arquivos, que permite criar arquivos e pastas no diretório ./pages/:

Para vincular a páginas diferentes, use o componente <Link>, da mesma forma que você usaria o bom e velho 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 é baixada 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, quando você seguir um link, 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, a página index.js tem um link para margherita.js com um <Link>:

Use o Chrome DevTools para verificar se margherita.js foi pré-buscado: 1. Para visualizar o site, pressione Ver app e depois Tela cheia .

1. Abra o Chrome DevTools.
2. Clique na guia Rede.
3. Marque a caixa de seleção Desativar cache.
4. Atualize a página.

Quando você carrega index.js, a guia Rede mostra que margherita.js também é baixado:

Como funciona a pré-busca automática

O Next.js pré-busca apenas os 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 ativaram Save-Data. 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 apenas busca o JavaScript, não o executa. Assim, ela não baixa nenhum conteúdo adicional que a página pré-buscada possa solicitar até que você acesse o link.

Atenção : os exemplos do Glitch estão sendo executados no modo de produção porque a pré-busca depende das condições de navegação e só é ativada em builds de produção otimizados. Para mudar para o modo de desenvolvimento, confira o README.md nos exemplos do Glitch.

Observação : como <link rel="preload"> solicita recursos com alta prioridade, o navegador espera que eles sejam usados imediatamente, o que aciona avisos do console. A prioridade de busca está disponível no Chrome, o que permite que o Next.js indique prioridade mais baixa para recursos que não são necessários imediatamente com <link rel="preload" fetchpriority="low">.

Evitar pré-busca desnecessária

Para evitar o download de conteúdo desnecessário, desative a pré-busca de 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 exemplo de app, 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 foi baixado, mas pineapple-pizza.js não:

Pré-busca com roteamento personalizado

O componente <Link> é adequado para a maioria dos casos de uso, mas também é possível criar seu próprio componente para fazer o roteamento. O Next.js facilita isso com a API de 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 seu código de roteamento personalizado.

Ao usar componentes personalizados para roteamento, também é possível adicionar 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 exemplo de app:

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 exemplo de app, a página index.js tem um <MyLink> para margherita.js e pineapple-pizza.js. A propriedade prefetch é 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} />

Ao carregar index.js, a guia Rede mostra que margherita.js foi baixado e pineapple-pizza.js não:

Ao clicar em qualquer um dos links, o Console registra "Having fun with Next.js." e navega até 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 roteamento personalizado, use a API de roteador do Next.js para implementar a pré-busca por conta própria. Evite baixar conteúdo desnecessariamente desativando a pré-busca para páginas raramente visitadas.