English
JavaScript & Frameworks

Single-Page-Application (SPA)

Auch genannt: SPA, Single-Page-Webanwendung

Eine Single-Page-Application (SPA) ist eine Web-App, die nur ein einziges HTML-Dokument lädt und beim Navigieren den Inhalt per JavaScript im Browser austauscht. MDN beschreibt das so: Nutzer wechseln zwischen Ansichten, ohne dass der Server jedes Mal eine neue Seite liefert. In der Suche taucht der Begriff „SPA“ meist im Wellness-Sinn auf, hier geht es um die Webtechnik.

Wie funktioniert eine SPA?

Beim ersten Aufruf lädt der Browser ein schlankes HTML-Dokument und das JavaScript. Das JavaScript holt Daten, etwa per Fetch API, und baut die Ansicht im DOM auf. Beim Klick auf einen Link wechselt ein clientseitiges Routing die Ansicht. Typische Frameworks sind React, Angular und Vue.

Wo das HTML entsteht: CSR, SSR, SSG und Dynamic RenderingVier Zeilen zeigen, wo der Inhalt einer Seite entsteht. Bei CSR schickt der Server eine leere HTML-Hülle, erst JavaScript im Browser baut den Inhalt. Bei SSR rendert der Server das HTML bei jeder Anfrage, Hydration macht es im Browser interaktiv. Bei SSG entsteht das HTML schon beim Build. Dynamic Rendering liefert Crawlern fertiges HTML und Nutzern die JavaScript-Version; Google nennt das einen Workaround.SERVERERSTE HTML-ANTWORTBROWSERCSRClient-SideRenderingschickt HTML-Hülleund JavaScript<div id="app">ohne InhaltJavaScript bautden InhaltSSRServer-SideRenderingrendert HTMLbei jeder AnfrageInhalt stehtim HTMLHydration machtdie Seite interaktivSSGStatic RenderingPrerenderingHTML entstehtschon beim BuildInhalt stehtim HTMLzeigt HTML sofort,Hydration möglichDynamicRenderingWorkarounderkennt Crawler,rendert nur für sieCrawler: HTMLNutzer: leere Hüllebei Nutzern bautJavaScript den InhaltSchematisch. Google rendert JavaScript in einem eigenen Schritt nach dem Crawlen.Nicht alle Bots führen JavaScript aus.
Entscheidend für Crawler ist, ob der Inhalt schon in der ersten HTML-Antwort steht. Google empfiehlt Server-Side Rendering oder Prerendering; Dynamic Rendering bezeichnet Google als Workaround, keine Dauerlösung. Quellen: web.dev: Rendering on the Web; Google Search Central: Grundlagen von JavaScript-SEO; Google Search Central: Dynamisches Rendering als Behelfslösung.

SPA und SEO

Google verarbeitet JavaScript-Seiten in Crawling, Rendering und Indexierung. Bei einer SPA enthält das erste HTML oft noch nicht den eigentlichen Inhalt, den liefert erst das Rendering mit Headless Chromium. Google rät, serverseitiges oder vorab gerendertes HTML weiterhin in Betracht zu ziehen, weil es die Website für Nutzer und Crawler schneller macht.

Aus den Google-Dokumenten ergeben sich konkrete Regeln:

  • Eigene URLs per History API: Verschiedene Ansichten sollen über die History API laufen, nicht über URL-Fragmente (#). Googlebot kann Fragmente nicht zuverlässig auflösen.
  • Richtige Statuscodes: SPAs liefern für Fehlerseiten oft Status 200. Google empfiehlt, auf eine echte 404-Seite weiterzuleiten oder dynamisch noindex zu setzen, damit keine Soft 404 entstehen.
  • Canonical im HTML: Wenn möglich, im ursprünglichen HTML setzen statt per JavaScript.
  • Kein Zustand zwischen Aufrufen: Googles Rendering behält localStorage, sessionStorage und Cookies nicht über Seitenaufrufe hinweg.

Beispiel

Ein Onlineshop als SPA liefert unter /produkt/42 und /produkt/99 dasselbe leere HTML mit <div id="app"></div>. Erst das JavaScript lädt Titel und Beschreibung. Ohne eigene URLs und ohne gerenderte Inhalte hat Google wenig, was es indexieren kann.

Häufige Fehler

  • Links ohne href. Google entdeckt Links nur in <a>-Elementen mit href-Attribut. Für das Routing einer SPA gilt das ebenso.
  • Inhalte hinter einer Berechtigung. Googlebot lehnt Berechtigungsabfragen ab, etwa den Kamerazugriff. Der Inhalt muss auch ohne Zustimmung erreichbar sein.
  • Inhalte nur über WebSockets oder WebRTC. Googlebot holt Inhalte per HTTP und unterstützt diese Verbindungen nicht. Google rät zu einem HTTP-Fallback.
  • Script-Dateien ohne Fingerprint im Namen. Googlebot nutzt den Cache aggressiv, und das Rendering kann Cache-Header ignorieren. Dadurch lassen sich veraltete JavaScript- oder CSS-Dateien laden. Google empfiehlt Content Fingerprinting, etwa main.2bb85551.js.

Häufige Fragen

Welche Beispiele für SPAs gibt es? Zweitquellen nennen Gmail, Netflix und Facebook, die Einordnung stammt nicht von den Anbietern.

Ist SSR besser als SPA? Das hängt vom Projekt ab. SSR liefert den Inhalt schon im ersten HTML, die SPA verlagert die Arbeit in den Browser.

Quellen

  1. SPA – MDN Glossarydeveloper.mozilla.org
  2. JavaScript SEO Basics – Google Search Centraldevelopers.google.com
  3. Fix Search-related JavaScript problems – Google Search Centraldevelopers.google.com

Stand: