Como o Next.js acelera as navegações com a pré-busca de rotas e como personalizá-lo.
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.
O componente <Link>
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.](https://web.dev/static/articles/route-prefetching-in-nextjs/image/screenshot-the-pages-dir-81addfb477754.png?authuser=6&hl=pt)
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
- 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.
Ao carregar index.js
, a guia Rede mostra que margherita.js
está
também foi baixado:
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 é:
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 é:
Quando você clica em um dos links, o Console registra a mensagem "Divirta-se com o Next.js". e navega para a nova rota:
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.