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.