Prerendering: Wie aus einer React-SPA eine Google-freundliche Seite wird

29. April 20263 min Lesezeit

TL;DR: „Prerendering rendert deine SPA zur Build-Zeit zu statischem HTML – mit JSON-LD, Meta-Tags und Edge-Deploy. So bleibt die DX einer SPA, aber Google sieht eine echte Seite."

— Till Freitag

Das Problem: SPAs sind für Crawler ein leeres Blatt

Eine React-SPA liefert beim ersten Request ein nahezu leeres <div id="root"></div>. Erst nachdem JavaScript geladen, geparst und ausgeführt wurde, entsteht der eigentliche Inhalt. Für Nutzer kein Problem – für Crawler, Social-Sharing-Previews und LLM-Bots ist das Spiel oft schon vorbei.

Wir haben das in Vibe Coding SEO ausführlich beschrieben. Dieser Artikel geht eine Ebene tiefer: Wie prerendert man eine moderne React/Vite-SPA, ohne auf Next.js oder einen SSR-Server umzusteigen?

Die Lösung: Build-Time-Prerendering mit Playwright

Statt jeden Request live auf einem Node-Server zu rendern, machen wir es einmal – zur Build-Zeit:

Vite baut die SPA wie gewohnt zu statischen JS/CSS-Bundles
Ein Playwright-Headless-Browser startet einen lokalen Server und besucht jede Route
Das vollständig hydrierte HTML wird pro Route als index.html abgelegt
JSON-LD, Meta-Tags und Sitemap werden in den HTML-Stream injiziert
Der gesamte statische Output wird auf das Vercel Edge Network deployed

Das Ergebnis: Crawler bekommen vollständiges HTML in einem einzigen Request. Nutzer bekommen die SPA-Erfahrung, sobald JS hydratisiert.

Die Pipeline im Überblick

React SPA  →  Playwright  →  Static HTML  →  Schema.org  →  Edge Deploy  →  Crawler
(Vite)        (Headless)    (per Route)     (JSON-LD)      (Vercel)        & User

Vier Bausteine, deterministisch verkettet. Kein Plugin-Roulette, kein PHP, kein „läuft beim Kunden, nicht bei mir".

Warum nicht einfach Next.js?

Eine berechtigte Frage. Next.js löst das gleiche Problem – aber mit anderem Trade-off:

Aspekt	Next.js SSR	Playwright-SSG
Hosting	Node-Server / Edge-Functions	Reine statische Files
Latenz	Cold Starts möglich	Reines CDN, < 50 ms
Build-Komplexität	Framework-Konventionen	Vite + Playwright-Skript
Vendor-Bindung	Hoch (Vercel-optimiert)	Keine
Eignung für Vibe Coding	Schwierig (Konventionen)	Ideal (Standard-React)

Für AI-native Web-Apps mit Lovable ist die Standard-React-SPA der schnellere Pfad. Prerendering setzt sauber obendrauf, ohne dass der Agent Framework-Konventionen lernen muss.

Die kritischen Details

1. Routen entdecken

Wir lesen alle Routen aus dem React-Router-Tree und ergänzen dynamische Pfade aus Markdown-Frontmatter (Blog-Posts, Events). Ein Skript erzeugt die vollständige Route-Liste – Single Source of Truth.

2. Meta-Tags zur Build-Zeit injizieren

react-helmet-async setzt Meta-Tags clientseitig – das reicht Crawlern oft nicht. Unser Vite-Plugin inject-seo liest die fertig gerenderte <head> aus dem Playwright-Output und schreibt sie als statisches Markup in die index.html. So sehen Bots <title>, <meta>, OpenGraph und Canonical vor JS-Ausführung.

3. JSON-LD pro Seitentyp

Jede Seite bekommt das passende Schema: Organization für die Startseite, Article für Blog-Posts, Event für Event-Seiten, Product für Tool-Pages. Mehr dazu in unserer SEO-Master-Strategy.

4. Sitemap & robots.txt

Aus der Route-Liste generieren wir parallel sitemap.xml mit lastmod aus Frontmatter. Crawler kennen jede Seite, jede Änderung wird angezeigt.

5. Edge-Deploy

Vercel verteilt das statische Output-Verzeichnis auf 100+ Regionen. TTFB unter 50 ms weltweit – ohne Caching-Plugin, ohne CDN-Konfiguration, ohne Sysadmin.

Was du vermeiden musst

useEffect für SEO-relevante Daten: läuft erst nach Hydration, Crawler sieht es nicht. Lade Daten zur Build-Zeit oder direkt im JSX.
Client-only Routing-Tricks: Hash-Routes (#/about) werden nicht prerendert. Immer echtes History-API-Routing nutzen.
Race Conditions in Helmet: Wenn mehrere <Helmet>-Instanzen kämpfen, schreibt Playwright den letzten Sieger. Ein zentrales <SEOHead>-Component vermeidet das.

Was du gewinnst

Lighthouse 95+ out of the box – ohne Performance-Plugin
Crawler-Vollzugriff – Google, Bing, ChatGPT, Perplexity sehen alles
Social Previews funktionieren – OG-Image, Title, Description vor JS
Keine Server-Wartung – nur statische Files auf Edge
Volle Vibe-Coding-Geschwindigkeit – der Agent baut Standard-React, die Pipeline kümmert sich um den Rest

Fazit: Prerendering ist die fehlende Brücke

WordPress liefert HTML, weil PHP serverseitig rendert – mit allen Wartungs- und Plugin-Problemen. Eine SPA liefert kein HTML, weil sie clientseitig rendert. Prerendering kombiniert das Beste aus beiden Welten: HTML-First für Crawler, SPA-DX für das Team.

Genau diese Pipeline läuft hinter dieser Seite. Genau diese Pipeline zeigen wir live bei TokenMade in Hamburg – ohne Slides, in 5 Minuten.

👉 Kostenloses SEO-Audit für deine Vibe-Coding-App →

TeilenLinkedIn WhatsApp E-Mail

Verwandte Artikel

Headless Browser rendert SPA-Seiten als statisches HTML für Suchmaschinen

14. April 20265 min

Playwright SSG Tutorial: So machst du Lovable Apps für Google sichtbar

SPAs sind für Suchmaschinen unsichtbar. Mit Playwright kannst du jede Lovable App in statisches HTML rendern – automatis…

Rakete aus Code-Elementen startet durch Suchergebnisseiten mit Lighthouse Score 100

14. April 20265 min

Vibe Coding & SEO: Warum KI-generierte Apps unsichtbar bleiben – und wie wir das lösen

Lovable, Bolt, v0 – Vibe Coding Tools erzeugen SPAs, die Google nicht sieht. Unser Playbook macht sie SEO-ready: SSG, Sc…

Google Search Console Dashboard mit Performance-Graphen und Coverage Reports

14. April 20264 min

Google Search Console für Vibe-Coding-Projekte: Setup, Debugging & Indexierung

Deine Lovable-App ist live auf Vercel – aber Google indexiert nichts? So richtest du die Search Console ein, debuggst Cr…

Vernetzte Schema-Knoten als leuchtender Graph auf dunklem Hintergrund

14. April 20265 min

JSON-LD Schema für SPAs automatisieren: Structured Data ohne Backend

SPAs haben keine Structured Data – und Google zeigt keine Rich Snippets. Dieses Tutorial zeigt, wie du JSON-LD Schemas i…

Pipeline-Diagramm mit drei Stationen: Lovable, GitHub, Vercel

14. April 20264 min

Lovable → GitHub → Vercel: Der komplette Deployment-Flow für SEO-ready Apps

Lovable generiert die App, GitHub versioniert den Code, Vercel liefert mit < 50ms TTFB aus. Dieser Guide zeigt den kompl…

Social Media Preview Cards mit OG-Image Meta Tags schweben im dunklen Raum

14. April 20264 min

OG-Image Best Practices für SPAs: So werden deine Vibe-Coding-Projekte teilbar

Wenn du einen Link aus deiner Lovable-App teilst, zeigt LinkedIn ein leeres Kästchen. Warum SPAs keine Social Previews l…

7. April 20264 min

monday Vibe Q1/2026: Ein Jahres-Backlog in einem Quartal – Das größte Update seit Launch

monday.com hat im Q1/2026 ein komplettes Jahres-Backlog für Vibe Apps ausgeliefert. 19+ Features, 26 A/B-Tests, Mobile S…

Fünf aufsteigende Ebenen von Agentic Coding Tools – von Terminal-Multiplexern bis zu autonomen Agent-Teams

28. März 20264 min

Herding Cats: Die Agentic Coding Tools Landschaft (März 2026)

Nicht Cursor. Nicht Windsurf. Eine parallele Tooling-Ebene legt sich um headless CLI-Agents – Terminals, Session Manager…

18. März 20264 min

monday Vibe Apps – Eigene Mini-Anwendungen ohne Code bauen (2026 Guide)

monday Vibe Apps ermöglichen es jedem, eigene Mini-Anwendungen per Prompt zu bauen – ohne Code, direkt in monday.com. So…