Welche Möglichkeiten gibt es, Routing im Frontend-Development umzusetzen?

Es gibt zwei Hauptmethoden, um das Routing im Frontend zu implementieren:

1. Client-seitiges Routing: Das Routing wird direkt im Browser mit JavaScript gehandhabt.

   • Funktionsprinzip: Beim Navigieren wird die Seite nicht vollständig neu geladen. JavaScript ändert die URL in der Adressleiste des Browsers (mithilfe der History-API) und lädt oder zeichnet die notwendigen Komponenten oder Teile der Seite dynamisch neu.
   • URL-Zustand:
     • Verwendet die History-API (pushState, replaceState). Die URL ist sauber, ohne #.
     • Kann Hash (#) in der URL verwenden (veralteter Ansatz mit #).
   • Vorteile:
     • Verbesserte Benutzererfahrung (schnellere Übergänge, kein vollständiges Neuladen).
     • Geeignet für Single-Page-Applications (SPA).
   • Nachteile:
     • Erfordert zusätzliche Serverkonfiguration, um direkte Zugriffe auf URLs korrekt zu handhaben (z.B. Fallback auf index.html konfigurieren).
     • Es können SEO-Probleme auftreten, wenn der Inhalt nur clientseitig gerendert wird (durch SSR oder Pre-Rendering gelöst).
   • Beliebte Bibliotheken/Frameworks: React Router, Vue Router, Angular Router.

2. Server-seitiges Routing: Das Routing wird vollständig auf der Serverseite verarbeitet.

   • Funktionsprinzip: Bei jeder Anfrage an eine neue URL sendet der Browser eine Anfrage an den Server. Der Server verarbeitet die Anfrage, bestimmt, welchen Inhalt er zurückgeben soll, und sendet eine vollständige HTML-Seite an den Client. Der Browser lädt die Seite vollständig neu.
   • URL-Zustand: Die URL entspricht der tatsächlichen Ressource auf dem Server.
   • Vorteile:
     • Einfache Implementierung für Multi-Page-Applications (MPA).
     • Hervorragende Indexierung durch Suchmaschinen (SEO), da der Inhalt sofort bereitsteht.
     • Erfordert kein JavaScript für die grundlegende Navigation.
   • Nachteile:
     • Langsamere Übergänge zwischen Seiten aufgrund des vollständigen Neuladens.
     • Weniger interaktiv im Vergleich zu SPA.
   • Beispiele: Erbt von traditionellen Webanwendungen, bei denen jede URL einer Datei oder Route auf dem Server entspricht (z.B. PHP, Python mit Frameworks wie Django/Flask, Node.js mit Express usw.).

In modernen Frontend-Anwendungen, insbesondere in SPA, ist clientseitiges Routing Standard. Serverseitiges Routing wird häufiger für Multi-Page-Sites oder in Kombination mit clientseitigem Routing zur Verbesserung der SEO verwendet (z.B. SSR).