Pré-busca de rotas no Next.js

Como o Next.js acelera a navegação com o pré-carregamento de rotas e como personalizar essa funcionalidade.

Milica Mihajlija

O que você aprenderá?

Neste post, você vai aprender como funciona o roteamento no Next.js, como ele é otimizado para velocidade e como personalizá-lo para melhor atender às suas necessidades.

O componente <Link>

No Next.js, não é necessário 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 .

1. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.

2. Clique na guia Rede.

3. Marque a caixa de seleção Desativar cache.

4. Recarregue a página.

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

Como funciona o pré-carregamento automático

O Next.js faz precarregar apenas os links que aparecem na viewport e usa a API Intersection Observer para detectá-los. Ele também desativa o pré-carregamento quando a conexão de rede é lenta ou quando os usuários ativam 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 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 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, o trajeto especificado na propriedade href será pré-buscado 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 é 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 pré-busca automaticamente o 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, use a API de roteador Next.js para implementar a pré-busca. Para evitar o download desnecessário de conteúdo, desative a pré-busca para páginas raramente visitadas.