Wstępne pobieranie tras w Next.js

Jak Next.js przyspiesza nawigację dzięki wstępnemu pobieraniu tras oraz jak to dostosować.

Milica Mihajlija

Czego się nauczysz?

Z tego posta dowiesz się, jak działa routing w Next.js, jak jest on optymalizowany pod kątem szybkości oraz jak możesz go dostosować do swoich potrzeb.

Komponent <Link>

W przypadku kodu Next.js nie musisz ręcznie konfigurować routingu. Next.js używa routingu opartego na systemie plików, co pozwala na tworzenie po prostu plików i folderów w katalogu ./pages/:

Aby utworzyć linki do innych stron, użyj funkcji <Link>, podobnie jak użyj starego, dobrego elementu <a>:

<Link href="/margherita">
  <a>Margherita</a>
</Link>

Gdy używasz komponentu <Link> do nawigacji, Next.js dla Ciebie. Normalnie strona jest pobierana, gdy klikniesz link do niej. Next.js automatycznie pobiera z wyprzedzeniem kod JavaScript potrzebny do renderowania strony.

Gdy wczytasz stronę z kilkoma linkami, istnieje spore prawdopodobieństwo, że oznacza to, że znajdujący się za nią komponent został już pobrany. Dzięki temu reagowanie aplikacji przez przyspieszenie przechodzenia do nowych stron.

W przykładowej aplikacji poniżej strona index.js zawiera link do strony margherita.js ze znakiem <Link>:

Przy użyciu Narzędzi deweloperskich w Chrome sprawdź, czy strona margherita.js jest wstępnie wczytana: 1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran

1. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.

2. Kliknij kartę Sieć.

3. Zaznacz pole wyboru Wyłącz pamięć podręczną.

4. Odśwież stronę.

Po załadowaniu pakietu index.js na karcie Network (Sieć) będzie widoczny komunikat margherita.js też pobrano:

Jak działa automatyczne pobieranie wstępne

Next.js pobiera z wyprzedzeniem tylko linki pojawiające się w widocznym obszarze i korzysta z metody Intersection Observer API, w celu ich wykrycia. Wyłącza też pobieranie z wyprzedzeniem, gdy połączenie sieciowe jest wolne. lub gdy użytkownicy Save-Data włączony. Na podstawie tych testów Next.js dynamicznie wstawia tagi <link rel="preload">, aby pobrać komponenty podczas kolejnych nawigacji.

Next.js tylko pobiera kod JavaScript, go nie wykonuje. Dzięki temu nie tylko pobieranie jakichkolwiek dodatkowych treści, o które może prosić wstępnie wczytana strona, dopóki nie wejdziesz na kliknij link.

Unikaj niepotrzebnego wstępnego wczytywania

Aby uniknąć pobierania niepotrzebnych treści, możesz wyłączyć pobieranie z wyprzedzeniem na rzadko odwiedzone strony, ustawiając właściwość prefetch w systemie <Link> na wartość false:

<Link href="/pineapple-pizza" prefetch={false}>
  <a>Pineapple pizza</a>
</Link>

W drugiej przykładowej aplikacji strona index.js zawiera parametr <Link> do pineapple-pizza.js z wartością prefetch ustawioną na false:

Aby sprawdzić aktywność sieciową, wykonaj czynności podane w pierwszym przykładzie. Kiedy wczytasz index.js, na karcie Sieć Narzędzi deweloperskich zobaczysz, że margherita.js to pobrane, ale pineapple-pizza.js nie:

Wstępne pobieranie z routingiem niestandardowym

Komponent <Link> sprawdza się w większości przypadków, ale możesz też tworzyć aby ustawić trasy. Next.js ułatwia Ci to dzięki API routera jest dostępny w next/router. Jeśli chcesz coś zrobić (na przykład przesłać formularz), zanim przejdziesz do nowej trasy, możesz zdefiniować to w niestandardowym kodzie trasy.

Jeśli do routingu używasz komponentów niestandardowych, możesz też dodać do nich pobieranie z wyprzedzeniem. Aby wdrożyć w kodzie routingu wstępne pobieranie, użyj metody prefetch z useRouter

Spójrz na components/MyLink.js w tej przykładowej aplikacji:

Wstępne pobieranie odbywa się wewnątrz useEffect. Jeśli Właściwość prefetch w obiekcie <MyLink> jest ustawiona na true, trasa określona w Właściwość href jest pobierana z wyprzedzeniem po renderowaniu wartości <MyLink>:

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

Gdy klikniesz link, routing zostanie zakończony w aplikacji handleClick. Pojawi się komunikat jest zalogowany w konsoli, a metoda push przechodzi do nowej trasy określono w href:

const handleClick = e => {
    e.preventDefault();
    console.log("Having fun with Next.js.");
    router.push(href);
};

W tej przykładowej aplikacji strona index.js zawiera od <MyLink> do margherita.js oraz pineapple-pizza.js Właściwość prefetch jest ustawiona na true (/margherita) i do false w dniu /pineapple-pizza.

<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza"  title="Pineapple pizza" prefetch={false} />

Po załadowaniu pakietu index.js na karcie Network (Sieć) będzie widoczny komunikat margherita.js pobrane, a pineapple-pizza.js nie:

Gdy klikniesz dowolny z tych linków, Konsola zapisze wpis „Baw się z Next.js”. i przechodzi do nowej trasy:

Podsumowanie

Gdy używasz kodu <Link>, Next.js automatycznie pobiera z wyprzedzeniem kod JavaScript potrzebny do renderować linkowaną stronę, co przyspiesza przejście do nowych stron. Jeśli jesteś przy użyciu niestandardowego routingu, za pomocą interfejsu API routera Next.js możesz wdrożyć z wyprzedzeniem. Aby uniknąć niepotrzebnego pobierania treści, wyłącz pobierania z wyprzedzeniem w przypadku rzadko odwiedzanych stron.