einem großen Geschäft vergleichen, in dem man beim Wechsel zwischen verschiedenen Abteilungen nicht jedes Mal das gesamte Gebäude verlassen und wieder neu hineingehen muss – man bleibt einfach durchgehend drin und bewegt sich frei zwischen den Bereichen
Was steckt dahinter?
Eine Single Page Application lässt sich am besten mit einem großen Geschäft vergleichen, in dem man beim Wechsel zwischen verschiedenen Abteilungen nicht jedes Mal das gesamte Gebäude verlassen und wieder neu hineingehen muss – man bleibt einfach durchgehend drin und bewegt sich frei zwischen den Bereichen. Technisch bedeutet das: Eine SPA lädt beim ersten Aufruf einmalig die grundlegende Struktur der Anwendung, und bei jedem weiteren Navigieren – etwa von der Produktübersicht zur Detailseite eines einzelnen Produkts – wird die Seite nicht komplett neu vom Server geladen, sondern es werden lediglich die tatsächlich benötigten Daten nachgeladen. Diese Architektur fühlt sich für Nutzer deutlich schneller und “app-ähnlicher” an als klassische, mehrseitige Webseiten, bei denen jeder Klick einen kompletten Seitenneuaufbau auslöst, inklusive erneuten Ladens aller wiederkehrenden Elemente wie Header und Navigation. Frameworks wie Vue.js, React oder Angular werden häufig genutzt, um genau solche SPAs zu realisieren, da sie das dynamische Austauschen von Inhalten ohne vollständigen Seitenneuaufbau technisch elegant unterstützen. Der Komfort einer SPA hat jedoch auch Schattenseiten, die Entwickler bewusst adressieren müssen: Da der Großteil der Anwendung als JavaScript im Browser läuft, kann die initiale Ladezeit länger ausfallen, und Suchmaschinen hatten historisch größere Schwierigkeiten, den Inhalt rein clientseitig gerenderter Seiten zu erfassen. Genau aus diesem Grund existieren ergänzende Techniken wie Server-Side Rendering oder Static Site Generation, die häufig über Frameworks wie Nuxt.js bereitgestellt werden, um diese Nachteile gezielt auszugleichen.