Pré-busca de rotas no Next.js

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

Milica Mihajlija

O que você aprenderá?

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

No Next.js, você não precisa configurar o roteamento manualmente. O Next.js usa roteamento baseado em sistema de arquivos, o que permite criar arquivos e pastas Dentro do diretório ./pages/:

Captura de tela do diretório de páginas que contém três arquivos: index.js, margherita.js e abacaxi-pizza.js.

Para vincular a páginas diferentes, use o <Link>, da mesma forma que você use 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 para você. Normalmente, uma página é baixada quando você segue um link para ela, mas O Next.js faz a pré-busca automaticamente do JavaScript necessário para renderizar a página.

Quando você carrega uma página com alguns links, é provável que, no momento em que você seguir um link, o componente por trás dele já foi buscado. Isso melhora a capacidade de resposta do aplicativo, agilizando a navegação para novas páginas.

No app de exemplo abaixo, a página index.js é vinculada a margherita.js com um <Link>:

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

  1. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.

  2. Clique na guia Rede.

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

  4. Recarregue a página.

Ao carregar index.js, a guia Rede mostra que margherita.js está também foi baixado:

Guia &quot;Rede&quot; do DevTools com margherita.js em destaque.

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 classe Intersection API 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 Save-Data ativado. Com base nessas verificações, o Next.js injeta tags <link rel="preload"> dinamicamente para fazer o download de componentes navegações subsequentes.

O Next.js só busca o JavaScript. ele não será executado. Dessa forma, não é fazer o download de qualquer conteúdo adicional que a página pré-busca possa solicitar até que você a acesse o link.

.

Evitar pré-busca desnecessária

Para evitar o download de conteúdo desnecessário, você pode desativar a pré-busca apenas páginas 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ê carregar index.js, a guia Rede do DevTools vai mostrar que margherita.js está baixado, mas pineapple-pizza.js não é:

Guia &quot;Rede&quot; do DevTools com margherita.js em destaque.

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 torna isso mais fácil para você com API do roteador disponível em next/router. Se você quiser fazer algo (por exemplo, enviar um formulário) antes de navegar para um novo é possível definir isso no seu código de roteamento personalizado.

Ao usar componentes personalizados para o roteamento, você também pode adicionar a pré-busca a eles. Para implementar a pré-busca no código de roteamento, use o método prefetch da useRouter.

Confira o components/MyLink.js neste app de exemplo:

A pré-busca é feita Hook useEffect. Se o propriedade prefetch em uma <MyLink> for definida como true, a rota especificada na A propriedade href é pré-buscada quando a <MyLink> é renderizada:

useEffect(() => {
    if (prefetch) router.prefetch(href)
});

Quando você clica no link, o roteamento é feito em handleClick. Uma mensagem recebe registradas no console, e o método push navega para a nova rota especificado 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> a margherita.js e pineapple-pizza.js. A propriedade prefetch está definida como true em /margherita e para 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 está baixado e pineapple-pizza.js não é:

Guia &quot;Rede&quot; do DevTools com margherita.js em destaque.

Quando você clica em um dos links, o Console registra a mensagem "Divirta-se com o Next.js". e navega para a nova rota:

Console do DevTools mostrando a mensagem &quot;Divirta-se com o Next.js&quot;.

Conclusão

Quando você usa <Link>, o Next.js faz uma pré-busca automática do JavaScript necessário para processar a página vinculada, o que acelera a navegação para novas páginas. Se você for usando o roteamento personalizado, você pode usar a API do roteador Next.js para implementar fazer a pré-busca por conta própria. Evite fazer o download de conteúdo desnecessariamente desativando a pré-busca de páginas raramente visitadas.