# Single Page Application (SPA)

> Eine Single Page Application (SPA) ist eine Web-App, die alle Inhalte dynamisch in einer einzigen HTML-Seite nachlaedt, statt fuer jeden Klick neu zu laden.

**Quelle:** https://www.webtree.ch/lexikon/single-page-application

---

Eine **Single Page Application (SPA)** ist eine Webanwendung, die nur eine einzige HTML-Seite laedt und danach alle weiteren Inhalte dynamisch im Browser nachlaedt. Statt bei jedem Klick eine komplett neue Seite vom Server anzufordern, tauscht JavaScript nur die benoetigten Teile aus. Das Ergebnis fuehlt 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 uebernehmen.

## Warum SPAs wichtig sind

Der grosse Vorteil ist die **Geschwindigkeit nach dem ersten Laden**. Ist die App einmal geladen, reagieren Klicks praktisch verzoegerungsfrei, weil nur noch Daten (meist als JSON) ueber eine Schnittstelle nachgeladen werden, nicht ganze Seiten. Das ergibt fluessige, app-aehnliche Bedienung und ist ideal fuer interaktive Tools, Dashboards, Buchungssysteme oder Kundenportale.

Der Nachteil betrifft genau das, was fuer KMU zaehlt: **SEO und erste Ladezeit**. Klassische SPAs liefern beim ersten Aufruf oft nur ein leeres HTML-Geruest, das erst per JavaScript befuellt wird. Google kann das zwar rendern, tut es aber verzoegert und nicht immer zuverlaessig. Ausserdem laedt das grosse JavaScript-Bundle anfangs langsamer, was den **LCP** und damit die Core Web Vitals belastet.

## Praxis: SPA, MPA oder Hybrid

In der Praxis loest man das Dilemma heute meist mit einem Mittelweg:

- **Reine SPA** – stark fuer eingeloggte Bereiche, Web-Apps und Tools, wo SEO egal ist.
- **MPA (Multi Page Application)** – klassisch serverseitig, top fuer SEO, aber weniger interaktiv.
- **SSR / SSG** – serverseitiges Rendering oder statische Generierung liefern fertiges HTML aus und kombinieren SPA-Komfort mit SEO-Staerke.
- **Hydration** – das ausgelieferte HTML wird im Browser nachtraeglich "zum Leben erweckt" und verhaelt 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 fuer Schweizer KMU

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

---

## Haeufige Fragen

**Was ist der Unterschied zwischen einer SPA und einer normalen Website?**

Eine normale Website (MPA) laedt fuer jeden Klick eine neue Seite vom Server. Eine SPA laedt nur einmal und tauscht danach Inhalte dynamisch per JavaScript aus. Das fuehlt sich fluessiger an, kann aber SEO und die erste Ladezeit erschweren, wenn man nicht zusaetzlich serverseitiges Rendering einsetzt.

**Sind Single Page Applications schlecht fuer SEO?**

Reine SPAs sind eine Herausforderung fuer SEO, weil Inhalte erst per JavaScript erscheinen und Google sie verzoegert rendert. Mit serverseitigem Rendering oder statischer Generierung, etwa ueber Next.js, lassen sich diese Nachteile aber weitgehend ausgleichen, ohne auf den SPA-Komfort zu verzichten.

**Wann lohnt sich eine SPA fuer mein KMU?**

Eine SPA lohnt sich vor allem fuer interaktive Anwendungen wie Kundenportale, Buchungssysteme oder Konfiguratoren. Fuer eine klassische Firmen- oder Marketing-Website, die ueber Google gefunden werden soll, ist ein Hybrid-Ansatz mit SSR oder SSG meist die bessere Wahl.