Jak uciąłem kosztowne skoki transferu, wyłączając prefetch linków w Nuxcie

Odkrycie: nieoczekiwany skok transferu

Kilka dni temu optymalizowałem odziedziczony projekt w Nuxt 3 i zauważyłem dziwne skoki „Fast Data Transfer” na Vercelu. Aplikacja nie robiła niczego ciężkiego, a mimo to zużycie sieci wyglądało na mocno przesadzone.

Jedna rzecz rzucała się w oczy: każdy wewnętrzny link doczytywał treść w momencie, w którym pojawiał się w viewporcie.

Okazało się, że mechanizm prefetcha w nuxt-link pobierał z wyprzedzeniem masę chunków — zamieniając zwykłą nawigację po stronie w proces żarłocznie zjadający transfer.

Co odkryłem: prefetch nie jest darmowy

Domyślnie Nuxt włącza smart prefetching — czyli gdy <nuxt-link> pojawi się na ekranie, framework automatycznie pobiera kod tamtej strony. Robi to przez IntersectionObserver i requestIdleCallback, co samo w sobie jest sprytne — ale w większych aplikacjach z dużą liczbą linków kończy się zalewem niepotrzebnych requestów.

W praktyce oznaczało to, że użytkownicy odpalali dziesiątki pobrań stron samym scrollowaniem. Wszystko to lądowało na moim rachunku od Vercela.

Poprawka: globalne wyłączenie prefetcha

Potrzebowałem szybkiego i skutecznego sposobu, żeby to zatrzymać. Zajrzenie do dokumentacji pokazało, że prefetch da się wyłączyć globalnie w nuxt.config.ts:

export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        prefetch: false,
      },
    },
  },
})

Albo prościej:

export default {
  router: {
    prefetchLinks: false,
  },
}

Oba sposoby powstrzymują Nuxta przed wstrzykiwaniem tagów <link rel="prefetch"> dla chunków stron ([Nuxt][1], [Medium][2]).

Efekty: szybciej, lżej i taniej

• Zużycie transferu znacząco spadło
• Koszty „Fast Data Transfer” na Vercelu wróciły do normy
• Wydajność stron pozostała wysoka — bez marnowanych requestów
• Większa kontrola nad tym, co faktycznie jest prefetchowane

Wnioski

1. Odziedziczone domyślne ustawienia — zwłaszcza takie jak smart prefetch — potrafią po cichu drenować transfer.
2. Nuxt daje kontrolę — wyłącz prefetch globalnie, jeśli budżet znaczy dla ciebie więcej niż ultraagresywna szybkość nawigacji.
3. Na stronach z dużą liczbą linków wyłącz go domyślnie i włączaj ręcznie tylko na kluczowych linkach.
4. Dashboard kosztów na Vercelu pozwolił mi szybko namierzyć problem — to kluczowy element całego procesu optymalizacji.