ISR (Incremental Static Regeneration).
ISR (Incremental Static Regeneration) ist ein Verfahren aus Next.js, bei dem statisch vorgerenderte Seiten im laufenden Betrieb einzeln neu erzeugt werden, ohne die ganze Website neu zu bauen. Besucher erhalten weiterhin eine schnelle, zwischengespeicherte Seite, während diese im Hintergrund nach einer Frist oder auf Anstoss aktualisiert wird. ISR verbindet damit die Geschwindigkeit statischer Seiten mit aktuellen Inhalten.
ISR (Incremental Static Regeneration) — ausführlich erklärt
Es gibt grob drei Arten, eine Seite zu erzeugen. Bei der statischen Generierung (SSG) entsteht das HTML einmal beim Build und wird danach unverändert ausgeliefert, sehr schnell, aber nur so aktuell wie der letzte Build. Beim Server-Side Rendering entsteht das HTML bei jedem Aufruf neu, immer aktuell, aber mit Rechenaufwand pro Anfrage. ISR liegt dazwischen: Die Seite wird statisch erzeugt und zwischengespeichert, kann aber im Betrieb einzeln neu generiert werden.
Der klassische Ablauf ist zeitbasiert. Eine Seite erhält eine Revalidierungsfrist, zum Beispiel eine Stunde. Ruft jemand die Seite nach Ablauf dieser Frist auf, bekommt er zunächst noch die bestehende Fassung, während Next.js im Hintergrund eine neue erzeugt. Der nächste Besucher sieht dann die aktualisierte Seite. Dieses Muster nennt man «stale-while-revalidate»: lieber kurz die alte Fassung zeigen als den Besucher warten lassen.
Häufiger genutzt wird heute die On-Demand-Revalidierung. Dabei wird eine Seite nicht nach Zeit, sondern gezielt neu erzeugt, sobald sich ihre Daten ändern, etwa wenn im Headless CMS ein Artikel gespeichert oder im Shop ein Preis angepasst wird. Das CMS ruft dazu eine geschützte Schnittstelle auf, die genau diese Seite oder alle Seiten mit einem bestimmten Kennzeichen neu validiert. So bleiben Inhalte aktuell, ohne dass bei jeder kleinen Änderung tausend Seiten neu gebaut werden.
Für Suchmaschinen ist ISR günstig, weil jede Seite als fertiges HTML aus dem Cache kommt. Das sorgt für eine kurze Time to First Byte und vollständig lesbare Inhalte ohne JavaScript. Seiten, die beim Build noch nicht existierten, können beim ersten Aufruf erzeugt und danach ebenfalls zwischengespeichert werden. Das ist praktisch für grosse Kataloge, bei denen nicht alle Seiten vorab gebaut werden sollen.
Wann ISR passt und wann nicht
ISR eignet sich für Inhalte, die sich gelegentlich ändern und für alle Besucher gleich aussehen: Leistungsseiten, Blog- und Magazinartikel, Produktseiten, Glossarbegriffe, Standortseiten. Nicht geeignet ist es für Inhalte, die pro Person verschieden sind, etwa ein Warenkorb, ein Kundenkonto oder ein Dashboard. Diese Teile werden dynamisch gerendert oder im Browser geladen, oft auf derselben Seite neben statischen Bereichen.
Wichtig ist auch ehrliche Erwartung an die Aktualität: Bei zeitbasierter Revalidierung sieht mindestens ein Besucher nach einer Änderung noch die alte Fassung. Wo das nicht akzeptabel ist, etwa bei Preisen oder Verfügbarkeiten, ist On-Demand-Revalidierung die richtige Wahl. Diese Abwägungen gehören zur Architektur, die wir bei der Webentwicklung in Zürich und beim Website erstellen lassen festlegen.
Beispiel: Ein Gastrobetrieb mit wechselnder Karte
Ein typischer Fall, als Beispiel beschrieben: Ein Restaurant pflegt seine Speisekarte in einem CMS, jede Speise hat eine eigene Seite. Die Karte ändert sich einige Male pro Woche. Ein vollständiger Neubau der Website bei jeder Änderung wäre unnötig, eine Server-Berechnung bei jedem Aufruf ebenso.
Mit ISR werden die Seiten statisch ausgeliefert. Speichert das Team eine Änderung im CMS, löst das eine On-Demand-Revalidierung der betroffenen Speise und der Kartenübersicht aus. Gäste sehen nach wenigen Sekunden den neuen Stand, die Seiten bleiben schnell, und Google findet stets vollständiges HTML.
Weiterführende Seite
Server-Side RenderingHäufige Fragen zu ISR (Incremental Static Regeneration)
Bei SSG wird jede Seite einmal beim Build erzeugt und erst beim nächsten Build aktualisiert. Bei ISR kann jede Seite im laufenden Betrieb einzeln neu erzeugt werden, nach Zeit oder auf Anstoss. ISR ist also statische Generierung mit nachträglicher Aktualisierung.
Der Begriff ISR stammt aus Next.js. Andere Frameworks und Hosting-Plattformen bieten vergleichbare Muster unter anderen Namen, meist auf Basis von Caching mit stale-while-revalidate. Das Prinzip ist dasselbe: statisch ausliefern, im Hintergrund erneuern.
Bei zeitbasierter Revalidierung kann der erste Besucher nach Ablauf der Frist noch die alte Fassung sehen. Mit On-Demand-Revalidierung wird die Seite direkt nach der Änderung neu erzeugt, die Verzögerung beträgt dann meist nur Sekunden.
Weitere Begriffe mit „I“
Indexierung
Indexierung ist der Prozess, bei dem Suchmaschinen wie Google Webseiten in ihren Index aufnehmen. Nu...
INP (Interaction to Next Paint)
INP ist die neueste Core Web Vital von Google und misst die Reaktionsfähigkeit einer Website: Wie sc...
Internal Linking (interne Verlinkung)
Internal Linking bezeichnet die Verlinkung von Seiten innerhalb derselben Website. Interne Links füh...
Bereit für Ihr Projekt?
Wenden Sie dieses Wissen auf Ihre Website an — DLM Digital hilft Ihnen dabei.