Routing ist die Zuordnung von Adressen zu Inhalten. Beim Frontend-Routing übernimmt das der Browser: Ein Klick auf einen Link ändert die URL und tauscht die Ansicht aus, ohne dass der Server eine neue Seite schickt.
- Routing
Die Zuordnung von Adressen zu Ansichten, die eine Webanwendung im Browser vornimmt, ohne eine neue Seite vom Server zu laden.
Beispiel: „Mit dem Routing im Browser wechselt der Konfigurator zwischen den Schritten, und jeder Schritt hat trotzdem eine eigene Adresse.“Abgrenzung zum serverseitigen Routing: Dort entscheidet der Server anhand der URL, welche Seite er ausliefert. PHP-Frameworks wie Laravel routen auf dem Server, eine Single Page Application im Browser.
Wie Frontend-Routing funktioniert
Über die History-Schnittstelle des Browsers. Das Framework fängt den Klick auf einen Link ab, schreibt mit pushState die neue Adresse in die Leiste und zeigt die passende Ansicht. Der Zurück-Button löst ein Ereignis aus, auf das der Router ebenso reagiert.
Eine ältere Variante arbeitet mit dem Teil nach der Raute, etwa /#/kontakt. Sie kommt ohne Einstellungen am Server aus, erzeugt aber Adressen, die Suchmaschinen nicht als eigene Seiten werten.
Was beim Routing für SEO wichtig ist
Jede Ansicht braucht eine echte Adresse, die auch beim direkten Aufruf funktioniert. Ruft jemand /leistungen/webdesign direkt auf, muss der Server dafür eine Seite liefern, sonst landet der Besucher auf einer Fehlerseite, obwohl der Link innerhalb der Anwendung klappt.
Dazu kommen ein eigener Titel und eine eigene Meta-Description je Ansicht und Links als echte a-Elemente mit href. Wer Links nur per JavaScript-Klick auslöst, verbaut dem Googlebot den Weg; mehr unter JavaScript-SEO.
Routing in Meta-Frameworks
In Next.js, Nuxt und SvelteKit ergibt sich das Routing aus der Ordnerstruktur. Eine Datei unter pages/kontakt wird zur Adresse /kontakt, und das Framework sorgt dafür, dass sie auf dem Server und im Browser gleichermaßen funktioniert.
Damit entfällt das meiste von dem, was beim Frontend-Routing früher von Hand zu lösen war.