# Prefetching

Durch Prefetching (opens new window) ist es möglich, zusätzlich zu den aktuell zur Anzeige und Interaktion benötigten JavaScript Bundles, auch diejenigen bereits vorzuladen, die sich im sichtbaren Bereich des Browserfensters befinden. Dies geschieht erst nachdem die für die aktuelle Route direkt relevanten Bundles geladen sind und ein sogenannter "idle" Zustand erreicht ist. Daraus lässt sich zum einen schließen, dass Seiten automatisch in eigene Bundles unterteilt werden und zum anderen, dass die Time To Interactive (opens new window) nicht beeinflusst wird.

Prefetching in NuxtJS ist durch die Verwendung der <nuxt-link> Komponente (opens new window) automatisch aktiviert und wird auch als Smart Prefetching (opens new window) bezeichnet. Diese dient primär dazu, zwischen den verschiedenen Routen der Seite zu navigieren. Dies ist die NuxtJS äquivalente zu Vue Router's <router-link> (opens new window) Komponente und erweitert dessen Funktionalität.

Um jedoch Ressourcen zu sparen und eventuell garnicht benötigte Inhalte nicht zu laden, ist in hubble aktuell die Prefetching Funktionalität deaktiviert: Es werden nur aktiv nachgefragte Inhalte geladen. Die Konfiguration dazu befindet sich in der ~/nuxt.config.js.

// ~/nuxt.config.js
router: {
    prefetchLinks: false,
}
1
2
3
4

Dadurch lässt sich die <nuxt-link> Komponente auch ohne die Prefetching Funktionalität verwenden:

// ~/components/customer/CustomerAccountNavigation.vue
<nuxt-link :to="localePath('customer-dashboard')" class="sidebar-link">
    <button class="button-secondary">
        {{ $t('Customer Dashboard') }}
            <material-ripple />
    </button>
</nuxt-link>
1
2
3
4
5
6
7

Jedoch ist es wichtig anzumerken, dass durch die globale Deaktivierung der Prefetching Funktionalität es trotzdem möglich ist, pro Anwendungsfall eine Aktivierung vorzunehmen: Dafür ist lediglich das Hinzufügen des prefetch Attributs notwendig. Eine detaillierte Beschreibung kann auch der NuxtJS Dokumentation unter dem Abschnitt API: The <nuxt-link> component (opens new window) entnommen werden. Für Informationen, zu den Optionen für die Navigation zwischen den Routen, existiert der Abschnitt Routing / URL Handling in der hubble Dokumentation.