JavaScript-Framework: Next.js 12.1 gibt sich flexibler bei statischen Seiten

Das Update einzelner statischer Seiten über ISR lässt sich neuerdings direkt manuell anstoßen, um auf geänderte Inhalte zu reagieren.

In Pocket speichern vorlesen Druckansicht

(Bild: Shutterstock)

Lesezeit: 3 Min.

Das React-Framework Next.js ist in Version 12.1 erschienen. Das Open-Source-Framework, das auf Node.js aufbaut, serverseitiges Rendering bietet und statische Websites generieren kann, erweitert im aktuellen Release das Aktualisieren statischer Seiten. Außerdem bringt das Release Erweiterungen für den Rust-basierten Compiler SWC mit.

In Version 9.5 hat das Framework die Incremental Static Regeneration (ISR) eingeführt. Damit lassen sich einzelne statische Seiten neu erstellen, ohne die komplette Site neu zu generieren. Über einen Timer lässt sich festlegen, ab wann der Server eine Seite neu generieren soll.

Bei einem Wert von revalidate: 10 liefert der Server beispielsweise zehn Sekunden lang dieselbe Seite aus. Sobald danach der erste Client auf die Seite zugreift, erhält er noch den Inhalt aus dem Cache, aber gleichzeitig erstellt Next.js die Seite neu und löscht sie anschließend aus dem Cache, sodass der nächste Client beim Zugriff die neu erstellte Seite erhält.

Version 12.1 führt die Funktion unstable_revalidate() ein, die unabhängig vom Timer dafür sorgt, dass der Server die Seite neu generiert und die alte aus dem Cache entfernt. Die Funktion gehört wohl zu den meistgefragten seit der Einführung von ISR. Sie dient unter anderem dazu, auf Änderungen von Metadaten wie Preisen oder Reviews in E-Commerce-Anwendungen zu reagieren oder einzelne Seiten zu aktualisieren, wenn sich Inhalte im entkoppelten Content Management System (Headless CMS) ändern.

Das im Oktober 2021 veröffentlichte Next.js 12 hat Babel durch den in Rust geschriebenen Speedy Web Compiler (SWC) ersetzt, den auch die Laufzeitumgebung für JavaScript und TypeScript Deno und das Web-Build-Tool Parcel nutzen.

Das aktuelle Release ergänzt die Transformationen, die sich mit SWC erledigen lassen, um styledCcomponents, importSource, relay, removeReactProperties, removeConsole sowie Legacy Decorators. Damit hat das Next.js-Team aus eigener Sicht die wichtigsten Babel-Plug-ins nach Rust portiert.

Die Minification, also das Minimieren von Code und Markup, lässt sich ebenfalls neuerdings über den Speedy Web Compiler statt wie bisher über Terser erledigen. Derzeit ist der Weg über SWC noch als Release Candidate gekennzeichnet, und in Version 12.2 soll er zum Standard werden. Im aktuellen Release erfordert die SWC-Minification die Einstellung swcMinify: true im module.exports-Block von next.config.js.

Weitere Details wie Ergänzungen zur in Version 12 begonnenen Vorbereitung auf React 18 lassen sich dem Next.js-Blog entnehmen.

(rme)