Pre-Rendering bedeutet, das fertige HTML einer Seite vorab zu erzeugen, statt es erst im Browser per JavaScript aufzubauen. Im SEO-Kontext geht es um JavaScript-Websites, deren Inhalt dadurch schon im ausgelieferten HTML steht. Die gleichnamige Technik aus der 3D-Grafik ist damit nicht gemeint.
Wie funktioniert Pre-Rendering?
Der Begriff wird in zwei Bedeutungen verwendet. In Frameworks wie Next.js oder React Router beschreibt er das Erzeugen von HTML-Dateien beim Build oder auf dem Server. Der Browser bekommt eine lesbare Seite und macht sie per JavaScript interaktiv (Hydration). React Router erzeugt die Dateien beim Build und kann sie ohne Laufzeit-Server ausliefern.
Daneben gibt es Dienste, die Seiten in einem Browser rendern, das Ergebnis speichern und es nur bei Anfragen von Crawlern ausliefern. Menschliche Besucher erhalten weiter die JavaScript-Version. Google nennt dieses Muster Dynamic Rendering und stuft es als Workaround ein, nicht als Dauerlösung. Es verursache zusätzliche Komplexität und Ressourcenbedarf. Empfohlen werden stattdessen Server-Side Rendering, statisches Rendering oder Hydration. Die Dokumentation beschreibt Dynamic Rendering inzwischen in der Vergangenheitsform („war ein Workaround“). Cloaking ist es laut Google nicht, solange Crawler und Nutzer gleichwertigen Inhalt sehen.
| Art | Wo und wann entsteht das HTML? | Inhalt schon im ausgelieferten HTML? | Einordnung durch Google |
|---|---|---|---|
| Client-Side Rendering (CSR) | im Browser per JavaScript; Daten, Templates und Routing laufen auf dem Client | nein, erst nach Ausführen von JavaScript | Google rendert Seiten mit Status 200 in einem eigenen Schritt nach dem Crawlen und empfiehlt Server-Side- oder Pre-Rendering, weil nicht alle Bots JavaScript ausführen |
| Server-Side Rendering (SSR) | auf dem Server, bei jeder Anfrage | ja | von Google als Lösung empfohlen (statt Dynamic Rendering) |
| Static Site Generation (SSG, statisches Rendering) | beim Build; meist vorab eine HTML-Datei je URL | ja | von Google als Lösung empfohlen (statt Dynamic Rendering) |
| Incremental Static Regeneration (ISR) | beim Build vorgerendert; nach Ablauf der Revalidierungszeit erzeugt der Server die Seite im Hintergrund neu (Framework-Funktion, z. B. Next.js) | ja, aus dem Cache; bis zur Neuerzeugung wird die ältere Version ausgeliefert | keine eigene Angabe von Google |
| Prerendering (dieser Begriff) | beim Build; die clientseitige App wird ausgeführt und ihr Startzustand als statisches HTML gespeichert | ja (Startzustand) | Google nennt Server-Side- oder Pre-Rendering weiterhin „eine gute Idee“, weil es Seiten für Nutzer und Crawler schneller macht |
| Dynamic Rendering | ein Rendering-Server erzeugt HTML nur für erkannte Crawler; Nutzer erhalten die clientseitig gerenderte Version | nur in der Version für Crawler | laut Google ein Workaround und keine dauerhafte Lösung; gilt nicht als Cloaking, solange Nutzer und Crawler ähnliche Inhalte sehen |
Als Ersatz für Dynamic Rendering nennt Google Server-Side Rendering, statisches Rendering und Hydration. Der ältere web.dev-Artikel „Rendering on the Web“ bezeichnet Dynamic Rendering noch als erwägenswerte Option; die Tabelle folgt der aktuellen Google-Search-Central-Doku. ISR ist kein Webstandard, die Beschreibung stammt aus der Next.js-Dokumentation. Prerendering hat im Sprachgebrauch weitere Bedeutungen; hier ist die Definition von web.dev gemeint. Quellen: web.dev: Rendering on the Web; Google Search Central: Understand JavaScript SEO basics (last updated 2026-03-04); Google Search Central: Dynamic rendering as a workaround (last updated 2025-12-10); Next.js Docs: How to implement Incremental Static Regeneration (ISR). Stand: .
Was bedeutet Pre-Rendering für SEO?
Google rendert JavaScript mit einem Headless-Chromium, allerdings erst, wenn Ressourcen frei sind. Enthält schon das initiale HTML den Inhalt, hängt die Indexierung weniger von diesem Schritt ab. Nicht jeder Crawler führt JavaScript aus, das gilt etwa für viele Social-Media-Bots und KI-Crawler (Einschätzung, je Bot zu prüfen). Pre-gerendertes HTML erreicht sie ohne Rendering.
Prüfen lässt sich das mit deaktiviertem JavaScript im Browser oder durch Vergleich von Raw HTML und gerendertem HTML.
Beispiel
Konfiguration in React Router, die drei Pfade beim Build als HTML erzeugt:
export default {
prerender: ["/", "/blog", "/blog/erster-beitrag"],
} satisfies Config;
Alle anderen Routen werden je nach Einstellung zur Laufzeit gerendert oder über einen SPA-Fallback ausgeliefert.
Häufige Fehler
- Interaktivität voraussetzen: Laut web.dev ist der Großteil einer vorgerenderten Seite ohne JavaScript inaktiv, für Interaktion braucht sie meist mehr JavaScript.
- Workaround als Dauerlösung: Google beschreibt Dynamic Rendering als Workaround und keine dauerhafte Lösung.
- Unterschiedliche Inhalte für Crawler und Nutzer: Dynamic Rendering gilt laut Google nicht als Cloaking, solange beide ähnliche Inhalte sehen. Abweichende Inhalte können Cloaking sein.
Häufige Fragen
Ist Pre-Rendering dasselbe wie Server-Side Rendering? Nicht ganz. Beim Pre-Rendering entsteht das HTML vorab, beim Server-Side Rendering bei jeder Anfrage. In Frameworks werden beide Wege oft unter „Pre-Rendering“ zusammengefasst.
Quellen
- Dynamisches Rendering als Workaround – Google Search Centraldevelopers.google.com
- Grundlagen zu JavaScript-SEO – Google Search Centraldevelopers.google.com
- Pre-Rendering – React Router Docsreactrouter.com
- Pre-rendering – Next.js Learnnextjs.org
- Rendering on the Web – web.devweb.dev
Stand: