„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.
§ 00 · Routing — eine URL mit einer Ansicht verbinden
Routing 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.
§ 01 · Statische und dynamische Routen
Bei 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.
§ 02 · Gemeinsame UI kann beim Navigieren erhalten bleiben
Link 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.
§ 03 · Rendering — wann und wo die Ansicht entsteht
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.
§ 04 · Adressform und Erstellungszeitpunkt nicht verwechseln
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.
| Pfadform | Erstellungszeitpunkt | Mögliches Beispiel |
|---|---|---|
| Fester Pfad | Prerendering | /about beim Build vorab generieren |
| Fester Pfad | Rendering bei Anfrage | /dashboard für jede Nutzeranfrage erzeugen |
| Dynamischer Pfad | Prerendering | Die Liste der /posts/[slug]-Seiten beim Build erzeugen |
| Dynamischer Pfad | Rendering bei Anfrage | /products/[id] anhand der Anfragedaten erzeugen |
Beitrag lesen: sass.studio.