⚡Performance

Prefetching fuer schnellere Navigation

Seiten laden bevor der Nutzer sie anklickt

Prefetching laed die naechste Seite im Hintergrund bevor der Nutzer klickt. Wenn er dann navigiert, erscheint die Seite sofort. Das fuehlt sich an wie eine native App.

Pro-Tip — Der schnelle Weg
Next.js Link prefetched automatisch wenn der Link im Viewport sichtbar wird. Fuer Seiten die der Nutzer sicher besucht, nutze priority prefetch.
Seite 1
1

Next.js Link Prefetching

Der Link Component in Next.js prefetched automatisch. Sobald ein Link im Viewport erscheint, wird die Zielseite im Hintergrund geladen.

import Link from 'next/link';


// Automatisches Prefetching (Standard)
<Link href="/dashboard">Dashboard</Link>


// Prefetching deaktivieren fuer selten genutzte Links
<Link href="/impressum" prefetch={false}>Impressum</Link>
2

Router Prefetch manuell

Fuer programmtische Navigation kannst du router.prefetch nutzen. Ideal fuer Seiten die nach einer Aktion geladen werden.

import { useRouter } from 'next/navigation';


const router = useRouter();


// Prefetch bei Hover
<button
 onMouseEnter={() => router.prefetch('/checkout')}
 onClick={() => router.push('/checkout')}
>
 Zur Kasse
</button>
3

DNS Prefetch und Preconnect

Wenn deine App externe APIs oder CDNs nutzt, loesche die DNS-Abfrage und stelle die Verbindung schon im Head her.

// app/layout.tsx - Head Section
<link rel="dns-prefetch" href="https://api.example.com" />
<link rel="preconnect" href="https://api.example.com" crossOrigin="anonymous" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
4

Resource Hints nutzen

preload fuer kritische Resources die sofort gebraucht werden. prefetch fuer Resources die bald gebraucht werden. prerender fuer die wahrscheinlich naechste Seite.

<!-- Kritische Font sofort laden -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />


<!-- Naechste Seite im Hintergrund rendern -->
<link rel="prefetch" href="/api/dashboard-data" />


<!-- Speculation Rules (Chrome) -->
<script type="speculationrules">
{ "prerender": [{ "where": { "href_matches": "/dashboard/*" } }] }
</script>
5

Prefetch Budget beachten

Prefetche nicht alles. Jeder Prefetch verbraucht Bandbreite und Speicher. Konzentriere dich auf die 2-3 wahrscheinlichsten naechsten Seiten basierend auf dem Nutzerverhalten.

Seite 2
Warum das funktioniert
  • Seitenuebergaenge fuehlen sich sofort an statt Sekunden zu dauern
  • DNS und Verbindungsaufbau passieren bevor sie gebraucht werden
  • Nutzer nehmen die App als schneller wahr auch bei gleicher Server-Speed
  • Next.js macht das meiste automatisch, wenig eigener Aufwand
Tipps
  • Next.js Link prefetched nur im Production Build automatisch
  • Zu viel Prefetching verschwendet Bandbreite auf Mobilgeraeten
  • Speculation Rules API ist die Zukunft des Prefetching
  • Prefetch bei Hover ist ein guter Kompromiss aus Speed und Effizienz
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen