# Pre-Rendering

Kategorie: [Rendering & JavaScript](https://seo-geo-glossary.com/de/glossar/kategorie/rendering-javascript/) › [Rendering-Verfahren](https://seo-geo-glossary.com/de/glossar/kategorie/rendering-javascript/rendering-verfahren/) · Auch genannt: Prerendering

**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.

## 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:

```ts
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.

## Rendering-Arten im Vergleich

| 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 | 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 |

Quellen: [web.dev: Rendering on the Web](https://web.dev/articles/rendering-on-the-web); [Google Search Central: Understand JavaScript SEO basics (last updated 2026-03-04)](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics); [Google Search Central: Dynamic rendering as a workaround (last updated 2025-12-10)](https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering); [Next.js Docs: How to implement Incremental Static Regeneration (ISR)](https://nextjs.org/docs/app/guides/incremental-static-regeneration). Stand: 8. Oktober 2026

*Grafik: Wo das HTML entsteht: CSR, SSR, SSG.* 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.

## Nicht verwechseln

- [Dynamic Rendering](https://seo-geo-glossary.com/de/glossar/dynamic-rendering/index.md): liefert nur erkannten Crawlern eine vorgerenderte Version, Nutzer erhalten die JavaScript-Fassung. Google nennt das einen Workaround und empfiehlt stattdessen Server-Side Rendering, statisches Rendering oder Hydration.

## Verwandte Begriffe

- [Rendering](https://seo-geo-glossary.com/de/glossar/rendering/index.md)
- [Client-Side Rendering (CSR)](https://seo-geo-glossary.com/de/glossar/client-side-rendering/index.md)
- [Server-Side Rendering (SSR)](https://seo-geo-glossary.com/de/glossar/server-side-rendering/index.md)
- [Static Site Generation (SSG)](https://seo-geo-glossary.com/de/glossar/static-site-generation/index.md)
- [Dynamic Rendering](https://seo-geo-glossary.com/de/glossar/dynamic-rendering/index.md)
- [Hydration](https://seo-geo-glossary.com/de/glossar/hydration/index.md)

## Quellen

- [Dynamisches Rendering als Workaround – Google Search Central](https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering)
- [Grundlagen zu JavaScript-SEO – Google Search Central](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)
- [Pre-Rendering – React Router Docs](https://reactrouter.com/how-to/pre-rendering)
- [Pre-rendering – Next.js Learn](https://nextjs.org/learn/pages-router/data-fetching-pre-rendering)
- [Rendering on the Web – web.dev](https://web.dev/articles/rendering-on-the-web)

---

Stand: 8. Oktober 2026
URL: https://seo-geo-glossary.com/de/glossar/pre-rendering/