Was ist Prerendering?

Was ist Prerendering?

Prerendering bedeutet, das fertige HTML einer Seite schon vor der Anfrage zu erzeugen, meist beim Build, sodass Browser oder Crawler lesbares Markup statt einer leeren JavaScript-Hülle erhalten. Eine Single-Page-App bekommt so einen schnelleren ersten Seitenaufbau und indexierbare Inhalte, ohne bei jeder Anfrage zu rendern. In diesem Eintrag ist damit die Variante zur Build-Zeit gemeint. Sie ist eng mit der statischen Seitengenerierung verwandt und liegt zwischen Client-Side-Rendering und Server-Side-Rendering. Das ganze Spektrum steht unter Rendering.

So funktioniert es

Ein Build-Schritt führt Ihre App für eine Liste von Routen aus, wartet, bis der Inhalt erscheint, und speichert das entstandene HTML je URL. Ein CDN liefert diese Dateien aus. Im Browser wird die Seite sofort gezeichnet, danach übernimmt JavaScript per Hydration. Ändert sich der Inhalt einer Route oft, baut die inkrementelle statische Regeneration Seiten nach einer festgelegten Zeit oder auf Abruf neu, statt bei jedem Deployment.

Varianten und Einsatz

• Prerendering beim Build. Eine HTML-Datei je Route, beim Build erzeugt. Am besten für Marketingseiten, Blogs und Dokumentation. Grenze: Inhaltsänderungen brauchen einen neuen Build.
• Regeneration. Seiten sind statisch, werden aber nach einer Frist oder auf Abruf aktualisiert. Am besten für Kataloge und Artikel, die sich gelegentlich ändern.
• Dynamisches Prerendering. Ein Dienst rendert Seiten für Crawler, während Menschen die normale App erhalten. Google nennt Dynamic Rendering einen Workaround und keine empfohlene Lösung und empfiehlt stattdessen Server-Side-Rendering, statisches Rendering oder Hydration. Es wird nicht grundsätzlich als Cloaking gewertet, solange Crawler und Nutzer ähnliche Inhalte erhalten.

Die andere Bedeutung: Prerendering im Browser

Im Browser weist eine prerender-Regel der Speculation Rules API einen unterstützenden Browser an, die wahrscheinlich nächste Seite in einem verborgenen Tab zu laden und auszuführen, damit die Navigation sofort wirkt. Das ist eine andere Technik mit anderem Ziel, beschrieben unter Prefetch für Ressourcen und Speculative Loading. Laut MDN gilt sie standardmäßig nur für dieselbe Origin und ist unsicher für Seiten, deren Serveraktionen Nebenwirkungen haben, etwa Abmelden oder In-den-Warenkorb.

Warum es für Performance und SEO zählt

• Schnellerer erster Seitenaufbau. Der Browser erhält Markup, das er zeichnen kann, ohne auf JavaScript zu warten, was meist dem Largest Contentful Paint hilft.
• Crawlbare Inhalte. Suchmaschinen können den Inhalt schon aus der ersten HTML-Antwort lesen.
• Günstig auszuliefern. Statische Dateien lassen sich gut im CDN cachen und kosten pro Anfrage wenig.

Häufige Fehler

• Persönliche Daten ins HTML einbacken. Namen, Warenkörbe und Einstellungen gehören nach dem Laden in den Client-Code, nie in eine Seite, die alle Nutzer teilen.
• Veraltete Seiten. Eine lange Cache-Zeit oder ein fehlender Neuaufbau lässt Nutzer alte Inhalte sehen.
• Hydration-Abweichungen. Daten, zufällige IDs oder Locale-Formatierung, die sich zwischen Build und Browser unterscheiden, führen zu Warnungen und erneutem Rendern.
• Fehlende Metadaten. Titel, Beschreibung, Canonical und strukturierte Daten müssen auch im vorgerenderten HTML stehen.
• Angemeldete Seiten vorrendern. Für alles, was pro Nutzer variiert, Server- oder Client-Rendering verwenden.

Vorgerenderte Seiten testen

Prüfen Sie die Seite so, wie Nutzer sie erhalten: über Ihr CDN, aus mehreren Regionen, mit aktivem Caching. LoadFocus Page-Speed-Monitoring führt geplante Lighthouse-Audits aus und verfolgt Largest Contentful Paint und weitere Core Web Vitals über die Zeit. Wenn Sie Seiten auf Abruf neu erzeugen, zeigt ein Lasttest, ob dieser Endpunkt unter Last standhält. Mehr in Lasttests für Single-Page-Anwendungen.

Häufige Fragen: Prerendering

Ist Prerendering dasselbe wie SSR?

Nein. SSR rendert bei jeder Anfrage, Prerendering rendert vorab, beim Build oder nach Zeitplan. Beide liefern HTML an den Browser, aber Aktualität und Caching unterscheiden sich.

Ist Prerendering dasselbe wie statische Seitengenerierung?

Prerendering beim Build und statische Seitengenerierung sind nahezu dasselbe. Der Begriff Prerendering wird auch für dynamische Dienste und die Browserfunktion verwendet, prüfen Sie daher, was eine Quelle meint.

Braucht Google noch Prerendering?

Google kann JavaScript ausführen, doch fertiges HTML zu senden ist einfacher und zuverlässiger, und andere Crawler kommen mit JavaScript womöglich schlechter zurecht. Google empfiehlt für Neues Server-Side- oder statisches Rendering statt Dynamic Rendering.

Kann ich Seiten für angemeldete Nutzer vorrendern?

Nein. Inhalte, die je Nutzer abweichen, gehören nicht in gemeinsam genutztes HTML. Rendern Sie sie pro Anfrage auf dem Server oder nach dem Laden im Client.