NEXT.JS · ROUTING & RENDERING
NOTES — ED. 2026.08
Die Form einer Adresse und der Zeitpunkt der Seitenerstellung sind verschiedene Fragen.
Route und Render getrennt betrachten.
„Statisch“ und „dynamisch“ beschreiben sowohl die Form eines Pfades als auch den Zeitpunkt der Seitenerstellung. Auch dynamische Adressen lassen sich vorab generieren. Betrachte deshalb beide Achsen getrennt.
FIG. 01WHERE IT LIVES — WHEN IT IS MADE
URLROUTE · SEGMENT
Routing — eine URL mit einer Ansicht verbinden
ROUTING · 2026Routing legt fest, welche Ansicht zu einer Browser-URL gehört. Ein Pfad mit festgelegten Segmenten wie /about ist ein fester Pfad. Ein Pfad, dessen Werte sich je Seite unterscheiden, etwa /products/42, verwendet dynamische Segmente, um mehrere URLs mit einer Regel zu bearbeiten.
Im App Router von Next.js bilden Ordner die URL-Segmente, während eine page-Datei die dort angezeigte UI definiert. products/[id]/page verarbeitet /products/42 und /products/99 nach derselben Seitenregel und liest den id-Wert aus params.
STATIC · DYNAMICNESTED · CATCH-ALL
Statische und dynamische Routen
ROUTE SHAPES · 2026Bei statischen Routen wie /about oder /pricing sind die Pfadsegmente fest. Dynamische Routen setzen tatsächliche URL-Werte an benannte Stellen wie [id] oder [slug] ein und stellen so mehrere datenabhängige Seiten für Produkte, Beiträge oder Nutzer dar. „Dynamisch“ bedeutet hier, dass ein Teil der Adressregel variabel ist. Diese Unterscheidung heißt häufig statisches und dynamisches Routing.
Verschachtelte Ordner ergeben verschachtelte URLs. Mehrere dynamische Segmente sind möglich, etwa /shop/[category]/[product]. Ein Catch-all-Segment nimmt mehrere nachfolgende Segmente gemeinsam auf. Vertraue dynamischen Werten nicht ungeprüft: Prüfe Existenz und Format und beantworte ungültige Adressen mit 404.
LINKLAYOUT · 404
Gemeinsame UI kann beim Navigieren erhalten bleiben
NAVIGATION · 2026Link dient der Navigation zu Pfaden innerhalb der Anwendung. Es erhält Bedeutung und Zugänglichkeit eines normalen Links und ermöglicht dem Framework zugleich Vorabladen und clientseitige Übergänge. Dokumentwechsel werden grundsätzlich als Links dargestellt, nicht als Buttons, die die Adresse ändern.
Ein layout umschließt die gemeinsame UI mehrerer untergeordneter Pfade und kann beim Wechsel erhalten bleiben. loading übernimmt die Warteansicht, error die Fehlergrenze und not-found die Antwort für nicht gefundene Pfade. Routing ist nicht nur eine Adressliste, sondern der Nutzerablauf einschließlich Wechseln, Warten und Scheitern.
CSR · SSR · PRERENDERINGHYDRATION
Rendering — wann und wo die Ansicht entsteht
RENDERING · 2026 Beim Client-Side Rendering (CSR) erzeugt der Browser die UI durch JavaScript. Beim Server-Side Rendering (SSR) erzeugt der Server HTML beim Eintreffen einer Anfrage. Prerendering erstellt und speichert HTML schon beim Build oder bei der Revalidierung zwischen. Je nach Route und Komponente lassen sich diese Verfahren innerhalb einer Anwendung mischen.
Auch serverseitig erzeugtes HTML benötigt Browser-JavaScript, das Ereignisse für Interaktionen verbindet. Dieser Vorgang heißt Hydration. Server-Rendering und clientseitige Übergänge sind weniger Gegensätze als kombinierbare Verfahren: Der Server zeigt die erste Ansicht schnell, spätere Wechsel laufen anschließend flüssig.
ROUTE SHAPE ≠ RENDER TIMETHE KEY DISTINCTION
Adressform und Erstellungszeitpunkt nicht verwechseln
TWO AXES · 2026 Eine dynamische Route muss nicht bei jeder Anfrage auf dem Server erzeugt werden. Sind die möglichen slug- oder id-Werte beim Build bekannt, lassen sich mehrere Seiten mit dynamischen Segmenten vorab generieren. Umgekehrt kann eine feste URL bei jeder Anfrage dynamisch gerendert werden, indem Cookies oder Suchbedingungen der Anfrage gelesen werden.
Bei der Frage „statisch oder dynamisch?“ kläre zuerst, was gemeint ist: das URL-Muster oder der Zeitpunkt der HTML-Erzeugung? Wer diese Fragen trennt, verwechselt ähnliche Begriffe wie statisches Routing und dynamisches Rendering auch im selben Satz nicht.
PfadformErstellungszeitpunktMögliches Beispiel
Fester Pfad
Erstellungszeitpunkt
PrerenderingMögliches Beispiel
/about beim Build vorab generierenFester Pfad
Erstellungszeitpunkt
Rendering bei AnfrageMögliches Beispiel
/dashboard für jede Nutzeranfrage erzeugenDynamischer Pfad
Erstellungszeitpunkt
PrerenderingMögliches Beispiel
Die Liste der /posts/[slug]-Seiten beim Build erzeugenDynamischer Pfad
Erstellungszeitpunkt
Rendering bei AnfrageMögliches Beispiel
/products/[id] anhand der Anfragedaten erzeugen— FIN —