Cloudflare hat Vinext 1.0 veröffentlicht, ein Open-Source-Framework, mit dem sich Next.js-Anwendungen über Vite ausführen und auf Plattformen wie Cloudflare Workers, Netlify und AWS Lambda bereitstellen lassen. Das Projekt richtet sich an neue und bestehende Anwendungen, einschließlich solcher, die den Pages Router oder den App Router verwenden, statt die Unterstützung auf die neuere Next.js-Architektur zu beschränken.
Breitere Kompatibilität mit Next.js-Anwendungen
Vinext entwickelte sich von einem einwöchigen, von künstlicher Intelligenz angetriebenen Experiment bei seiner Einführung im Februar zu einem Framework, das laut Cloudflare in der Produktion mit stark frequentierten und dynamischen Anwendungen eingesetzt wird. Das Unternehmen gibt an, dass die Kompatibilität mit den meisten von Kunden angeforderten Funktionen über 99 % beträgt. Dabei wird weiterhin das tatsächliche Verhalten der Anwendungen getestet und nicht lediglich die Nachbildung von APIs mit denselben Namen.
Die Version unterstützt sowohl den App Router als auch den Pages Router sowie hybride Anwendungen, React-Serverkomponenten, Server Actions, API-Routen, Routen-Handler, Middleware und clientseitige Navigation. Außerdem deckt sie serverseitiges Rendern von Seiten, inkrementelle Seitengenerierung (ISR), den Export in statische Ressourcen sowie die erneute Validierung im Hintergrund oder auf Abruf ab.
Was ändert sich in der Praxis?
Vinext vereinheitlicht die Caching-Funktionen zwischen den beiden Routern und den unterstützten Laufzeitumgebungen und bietet zusätzliche Unterstützung für Workers Cache. Außerdem stellt es mit Next.js kompatibles Tracing bereit, sodass bestehende OpenTelemetry- und Sentry-Konfigurationen weiterverwendet werden können. Auf Cloudflare Workers ist es zudem in die nativen Überwachungstools von Workers integriert.
Die Version fügt direkte Unterstützung für die Umgebung workerd während der Entwicklung und in der Produktion hinzu, einschließlich des Zugriffs auf Cloudflare-Dienste wie die Bildoptimierung und Hyperdrive. Die Unterstützung für das Routing von use cache im Zusammenhang mit Cache Components bleibt dagegen eingeschränkt. Cloudflare erklärt, dass der derzeitige Schwerpunkt auf den grundlegenden Framework-Funktionen liegt, auf die Anwendungen in der Produktion angewiesen sind.
Aufwärmen des Caches vor dem Start
Vinext 1.0 bietet eine Möglichkeit, Seiten für den App Router und den Pages Router während des Build-Prozesses vorab zu rendern und sie anschließend über ISR bereitzustellen sowie nach Route oder Tag zu invalidieren. Für Anwendungen mit Zehntausenden oder Hunderttausenden von URLs gibt es jedoch eine andere Option: Einen Teil des Vorab-Renderings vom Build-Rechner in das Cloudflare-Netzwerk zu verlagern.
Die Funktion cache warming verwendet die üblichen Next.js-Indikatoren, um die vorzubereitenden Seiten zu bestimmen, und kann auch Seiten mit hohem Datenverkehr identifizieren. Bevor die neue Version auf den Produktionsverkehr umgestellt wird, stellt Cloudflare eine Worker-Version mit null Prozent des Datenverkehrs bereit und ruft anschließend die Seiten dieser Version ab, um den Cache zu füllen. Nach Abschluss des Vorgangs kann die Bereitstellung hochgestuft werden. Dadurch lässt sich das sequenzielle Erstellen wenig besuchter Seiten vermeiden. Bei Verwendung dieser Funktion ist die Bereitstellung jedoch praktisch an Cloudflare gebunden.
Tests und Migrationspfad
Cloudflare zufolge basiert das Projekt auf Tausenden von Tests, die das Verhalten des Frameworks, die Server im Entwicklungs- und Produktionsmodus sowie Bereitstellungsziele auf Node.js und Cloudflare Workers abdecken. Außerdem wird die umfassende Testsuite von Next.js jede Nacht auf Vinext ausgeführt, um Regressionen infolge von Änderungen im Upstream zu erkennen. Der Migrationsprozess umfasst zwei Befehle, mit denen die Projektkompatibilität, die Vite-Konfiguration und die Bereitstellungseinrichtung überprüft werden, während die bisherige Next.js-Projektstruktur beibehalten wird: npx vinext check und anschließend npx vinext init.
Vinext steht für neue und bestehende Projekte zur Verfügung und kann mit dem Befehl npx @vinext/cloudflare deploy --warm-cache auf Cloudflare Workers bereitgestellt werden, einschließlich des Aufwärmens des Caches. Die Kompatibilitätsmatrix und die noch unvollständige Unterstützung von Funktionen wie Cache Components bleiben Punkte, die Teams vor der Migration komplexer Anwendungen prüfen sollten.