Web-Lexikon

Single Page Application (SPA)

Eine Single Page Application (SPA) ist eine Web-App, die alle Inhalte dynamisch in einer einzigen HTML-Seite nachlädt, statt für jeden Klick neu zu laden.

Eine Single Page Application (SPA) ist eine Webanwendung, die nur eine einzige HTML-Seite lädt und danach alle weiteren Inhalte dynamisch im Browser nachlädt. Statt bei jedem Klick eine komplett neue Seite vom Server anzufordern, tauscht JavaScript nur die benötigten Teile aus. Das Ergebnis fühlt sich an wie eine native App: keine sichtbaren Seitenwechsel, keine weisse Ladepause. Bekannte Beispiele sind Gmail, Google Maps oder Trello. Technisch stecken meist Frameworks wie React, Vue oder Angular dahinter, die das Routing und das Rendering im Browser übernehmen.

Warum SPAs wichtig sind

Der grosse Vorteil ist die Geschwindigkeit nach dem ersten Laden. Ist die App einmal geladen, reagieren Klicks praktisch verzögerungsfrei, weil nur noch Daten (meist als JSON) über eine Schnittstelle nachgeladen werden, nicht ganze Seiten. Das ergibt flüssige, app-ähnliche Bedienung und ist ideal für interaktive Tools, Dashboards, Buchungssysteme oder Kundenportale.

Der Nachteil betrifft genau das, was für KMU zählt: SEO und erste Ladezeit. Klassische SPAs liefern beim ersten Aufruf oft nur ein leeres HTML-Gerüst, das erst per JavaScript befüllt wird. Google kann das zwar rendern, tut es aber verzögert und nicht immer zuverlässig. Ausserdem lädt das grosse JavaScript-Bundle anfangs langsamer, was den LCP und damit die Core Web Vitals belastet.

Praxis: SPA, MPA oder Hybrid

In der Praxis löst man das Dilemma heute meist mit einem Mittelweg:

  • Reine SPA – stark für eingeloggte Bereiche, Web-Apps und Tools, wo SEO egal ist.
  • MPA (Multi Page Application) – klassisch serverseitig, top für SEO, aber weniger interaktiv.
  • SSR / SSG – serverseitiges Rendering oder statische Generierung liefern fertiges HTML aus und kombinieren SPA-Komfort mit SEO-Stärke.
  • Hydration – das ausgelieferte HTML wird im Browser nachträglich "zum Leben erweckt" und verhält sich danach wie eine SPA.

Frameworks wie Next.js (auf React-Basis) oder Nuxt verbinden genau diese Welten: Der erste Aufruf kommt fertig gerendert vom Server, danach navigiert die Seite wie eine SPA weiter.

Bezug für Schweizer KMU

Für eine normale KMU-Website, die über Google gefunden werden soll, ist eine reine SPA selten die beste Wahl, weil Sichtbarkeit und schnelle Erstdarstellung leiden. Sinnvoll ist sie für interaktive Bereiche wie Kundenlogins oder Konfiguratoren. Die meisten Webtree-Projekte setzen deshalb auf einen Hybrid mit SSR/SSG: Du bekommst die flüssige Bedienung einer SPA, ohne bei Suchmaschinen-Sichtbarkeit oder Ladezeit Kompromisse einzugehen.

Häufige Fragen

Verstanden. Jetzt umsetzen.

Die kostenlose Analyse zeigt dir, was Single Page Application (SPA) konkret für dein KMU bringt.