aeternum

Wir haben unsere Next.js-App mit vinext von Vercel zu Cloudflare gezügelt, und sie ist schneller geworden

DriveFlow läuft seit dem 27. Oktober 2026 auf Cloudflare Workers mit vinext. Was wir gegen Next.js auf Vercel gemessen haben, was wir für Workers ändern mussten und was vinext noch fehlt.

DriveFlow läuft seit dem 27. Oktober 2026 auf Cloudflare Workers, gebaut mit vinext statt mit Next.js. Seiten hinter dem Login antworten bis zu einem Drittel schneller als auf Vercel, und auf einem langsamen Handy erscheint der Hauptinhalt auf jeder getesteten Seite früher.

DriveFlow ist unsere Plattform für Schweizer Fahrschulen: 89 Seiten, 44 Route Handler, eine proxy.ts, Login über Supabase und PDF-Rechnungen mit QR-Rechnung. Als wir nach jemandem suchten, der eine App in dieser Grösse umgezogen hat, fanden wir Pull Requests für Demos und persönliche Websites. Hier ist darum unserer.

Warum wir unsere Next.js-App von Vercel weggezogen haben

Ein Grund war Geld, der andere Distanz.

Der Hobby-Plan von Vercel ist für den persönlichen, nicht kommerziellen Gebrauch gedacht. DriveFlow wickelt Zahlungen für Fahrschulen ab, also hätte der Livegang Vercel Pro bedeutet: 20 Dollar pro Entwickler-Sitz und Monat.

Die Distanz wog schwerer. Unsere Supabase-Datenbank steht in Zürich, Vercel liess unsere Funktionen in Frankfurt laufen. proxy.ts ruft bei jeder Navigation hinter dem Login supabase.auth.getUser() auf, also wartete jede Seite, die ein Fahrlehrer öffnete, auf den Weg von Frankfurt nach Zürich und zurück. Cloudflare beantwortet Besucher aus der Schweiz aus seinem Standort in Zürich, und dort läuft auch der Worker.

Weg einer Anfrage vor und nach dem UmzugVorher: Ein Besucher in der Schweiz erreicht eine Vercel-Funktion in Frankfurt, die die Supabase-Datenbank in Zürich abfragt und auf die Antwort wartet. Nachher: Der Besucher erreicht einen Cloudflare Worker in Zürich, der dieselbe Datenbank in derselben Stadt abfragt.Auf VercelBesucherSchweizFunktionFrankfurt, fra1SupabaseZürichJede Auth-Prüfung in proxy.ts geht über die Grenze und zurückAuf CloudflareBesucherSchweizWorkerZürich, ZRHSupabaseZürichDieselbe Prüfung bleibt in Zürich
Der Weg einer Seite hinter dem Login. Auf Vercel lief die Auth-Prüfung in Frankfurt und wartete auf Zürich. Auf Cloudflare sitzen Worker und Datenbank in derselben Stadt.

Was der Umzug nicht ändert: von wem du abhängst. Vercel und Cloudflare sind beides US-Firmen. Wer die Verarbeitung bei Cloudflare strikt in der EU halten will, braucht die Data Localization Suite, und die gibt es nur im Enterprise-Plan. Für DSGVO und Schweizer DSG zählt vor allem, wo die Kundendaten liegen, und die lagen schon vorher in Zürich. Wo Daten verarbeitet werden, ist dieselbe Frage, die entscheidet, ob du ein KI-Modell auf Kundendaten loslassen darfst. Das haben wir in lokale KI-Modelle und Schweizer Datenschutz durchgespielt.

Was vinext ist und wie es sich von OpenNext unterscheidet

vinext ist Cloudflares Neuimplementierung der Next.js-API auf Vite. Es liest dasselbe app/-Verzeichnis, dieselbe next.config.ts und dieselben next/*-Imports und baut daraus einen Worker. OpenNext, der ältere Weg, nimmt stattdessen die Ausgabe von next build und übersetzt sie. Wir haben nur vinext versucht: Version 1.0 war gerade erschienen, und npx vinext check stufte DriveFlow als zu 98 Prozent kompatibel ein. Die fehlenden zwei Prozent waren das Build-Plugin von Sentry.

Der Preis von vinext ist klar. Es ist ein zweites Framework, das jedem Next.js-Release folgen muss, und es ist jung: Version 1.0 kam am 28. September 2026, getestet haben wir 1.3.0.

Vercel vs. Cloudflare: der Benchmark

Auf Vercel lief der normale Build mit Next.js 16, auf Cloudflare der vinext-Build desselben Commits, beide gegen dieselbe produktive Datenbank. Ein Skript rief jede Seite 30 Mal mit curl ab, abwechselnd auf beiden Hosts, damit beide dasselbe Netz sahen, und meldete sich dort, wo eine Seite es verlangt, mit echten Testkonten an.

Antwortzeit des ServersBalkenpaare für zehn DriveFlow-Seiten. Cloudflare hat auf jeder Seite den tieferen Median. Öffentlich: Startseite 160 gegen 134 ms, Entdecken 129 gegen 116, Schulprofil 236 gegen 178, Ratgeber-Artikel 118 gegen 94, Sitemap 85 gegen 73, Login 118 gegen 87. Angemeldet: Finanzen Inhaber 185 gegen 125, Dashboard Fahrlehrer 166 gegen 137, Kalender Fahrlehrer 156 gegen 150, Dashboard Schüler 174 gegen 126.Antwortzeit des ServersMedian Time to First Byte in ms, je 30 AnfragenVercel, FrankfurtCloudflare, ZürichÖffentliche SeitenStartseiteStartseite, Vercel, Frankfurt: 160 ms160Startseite, Cloudflare, Zürich: 134 ms134EntdeckenEntdecken, Vercel, Frankfurt: 129 ms129Entdecken, Cloudflare, Zürich: 116 ms116SchulprofilSchulprofil, Vercel, Frankfurt: 236 ms236Schulprofil, Cloudflare, Zürich: 178 ms178Ratgeber-ArtikelRatgeber-Artikel, Vercel, Frankfurt: 118 ms118Ratgeber-Artikel, Cloudflare, Zürich: 94 ms94sitemap.xmlsitemap.xml, Vercel, Frankfurt: 85 ms85sitemap.xml, Cloudflare, Zürich: 73 ms73LoginLogin, Vercel, Frankfurt: 118 ms118Login, Cloudflare, Zürich: 87 ms87AngemeldetFinanzen InhaberFinanzen Inhaber, Vercel, Frankfurt: 185 ms185Finanzen Inhaber, Cloudflare, Zürich: 125 ms125Dashboard FahrlehrerDashboard Fahrlehrer, Vercel, Frankfurt: 166 ms166Dashboard Fahrlehrer, Cloudflare, Zürich: 137 ms137Kalender FahrlehrerKalender Fahrlehrer, Vercel, Frankfurt: 156 ms156Kalender Fahrlehrer, Cloudflare, Zürich: 150 ms150Dashboard SchülerDashboard Schüler, Vercel, Frankfurt: 174 ms174Dashboard Schüler, Cloudflare, Zürich: 126 ms126
Cloudflare hatte auf allen zehn Seiten den tieferen Median. Beim langsamsten Zehntel ist das Bild gemischt: vorne hinter dem Login, knapp hinten bei drei öffentlichen Seiten. Unterschiede unter etwa 15 ms sind Rauschen.

Am meisten gewannen die Seiten, bei denen wir es erwartet hatten. Hinter dem Login geht die Auth-Abfrage jetzt von Zürich nach Zürich, und die Finanzseite für Inhaber sank von 185 auf 125 ms.

Im echten Browser mit schneller Desktop-Verbindung waren die Abstände meist klein: Die Startseite zeigte ihren Hauptinhalt auf Vercel nach 300 ms, auf Cloudflare nach 308 ms. Die Ausnahme war das Schulprofil mit 784 gegen 328 ms. Mit einem gedrosselten Handy-Profil wurde der Unterschied spürbar.

Hauptinhalt auf einem langsamen HandyBalkenpaare für vier öffentliche Seiten auf einem gedrosselten Handy-Profil. Startseite 2852 gegen 1640 ms, Entdecken 2196 gegen 1552, Schulprofil 2612 gegen 1696, Ratgeber-Artikel 2072 gegen 1444. Auf Cloudflare erscheint der Hauptinhalt 29 bis 42 Prozent früher.Hauptinhalt auf einem langsamen HandyLargest Contentful Paint in ms, langsames 4G, CPU 4× langsamerVercel, FrankfurtCloudflare, ZürichStartseiteStartseite, Vercel, Frankfurt: 2852 ms2852Startseite, Cloudflare, Zürich: 1640 ms1640EntdeckenEntdecken, Vercel, Frankfurt: 2196 ms2196Entdecken, Cloudflare, Zürich: 1552 ms1552SchulprofilSchulprofil, Vercel, Frankfurt: 2612 ms2612Schulprofil, Cloudflare, Zürich: 1696 ms1696Ratgeber-ArtikelRatgeber-Artikel, Vercel, Frankfurt: 2072 ms2072Ratgeber-Artikel, Cloudflare, Zürich: 1444 ms1444
Median aus drei Ladevorgängen bei 375 × 812 Pixeln, 150 ms Latenz, 1,6 Mbit/s und vierfach verlangsamter CPU. Fertig geladen waren die Seiten auf beiden Hosts etwa gleichzeitig.

Dafür überträgt Cloudflare mehr. Im Handy-Profil waren es auf der Startseite 818 KB in 102 Anfragen, auf Vercel 734 KB in 38. vinext teilt das JavaScript in viele kleine Stücke und lädt den Code verlinkter Seiten nach dem Laden vor, das erste Bild wartet also nicht darauf. Auf einer Verbindung mit Datenlimit zählen die Bytes trotzdem.

Eine Einstellung ist Pflicht. Unser erster Build lief ohne Bildoptimierung, und die Startseite schickte 1186 KB Bilder statt 175 KB. Mit Cloudflare Images war ein Screenshot mit 640 Pixeln Breite als AVIF 23 KB gross, auf Vercel als WebP 24,5 KB.

Alle Zahlen stammen von einem Rechner in der Schweiz an einem Abend, dem 26. Oktober. Über Nutzer in der Schweiz sagen sie viel, über alle anderen nichts.

Was wir für Workers ändern mussten

Die meiste Arbeit hatte nichts mit vinext zu tun. Sie hatte mit Workers zu tun, und Workers ist kein Node.js: Es gibt weder Dateisystem noch Kindprozesse, und fetch verhält sich stellenweise anders.

Auf Vercel Auf Cloudflare
pdfkit liest seine Schriftmetriken von der Festplatte Die Browser-Version von pdfkit, Helvetica beim Start registriert
Schriften und Logos per fs zur Laufzeit gelesen Die Bytes beim Build in den Worker eingebettet
Der Service Worker in einer Route mit esbuild und git gebaut Von einem kleinen Vite-Plugin nach dem Client-Build gebaut
fetch mit redirect: "error" redirect: "manual", das Workers akzeptiert und das trotzdem nie einer Weiterleitung folgt
Die Client-IP aus x-vercel-forwarded-for cf-connecting-ip
Vercel Cron Ein scheduled-Handler im Worker, der dieselbe Route aufruft
Vercel Analytics und Speed Insights Cloudflare Web Analytics, ohne Cookies
Vorschauen unter *.vercel.app sind von sich aus noindex Unser Proxy schickt auf *.workers.dev X-Robots-Tag: noindex

Vor dem Wechsel sind wir jede Seite hinter dem Login als Inhaber, Fahrlehrer und Schüler durchgegangen und haben jede Datei, die die App erzeugt, auf beiden Hosts erzeugt. Dieselbe Rechnung mit QR-Rechnung, einmal von Vercel und einmal vom Worker, nebeneinander. Ein 200 sagt nichts darüber, ob ein PDF stimmt.

Was vinext anders macht und was es noch nicht kann

vinext selbst hat uns dreimal kurz überrascht. Es baut nicht, wenn zwei Seiten unter demselben Pfad liegen, was Next.js erlaubt; bei uns war es eine ungenutzte Seite in einer Route Group, die wir gelöscht haben. Es schreibt seine Cache-Regel für gehashte JavaScript-Dateien nur in _headers, wenn die Datei noch nicht existiert, und wenn ein anderes Plugin sie zuerst anlegt, bleibt jede Datei bei max-age=0; unser Build führt beide Regeln jetzt zusammen. Und es ruft register() in instrumentation.ts auf, ohne NEXT_RUNTIME zu setzen, also startete @sentry/nextjs auf dem Server nie, und @sentry/cloudflare hat dort übernommen. Keiner der drei Punkte stand im Issue-Tracker, als wir am 27. Oktober gesucht haben.

Ein paar offene Issues solltest du vor dem Wechsel lesen. Anfragen können in den Sekunden nach einem Deploy eine leere 503 bekommen. Es gibt keinen Skew-Schutz: Ein Tab, der vor einem Deploy geöffnet wurde, kann nach Code fragen, den es nicht mehr gibt. Vercel Hobby hatte allerdings auch keinen. Server Actions brechen in Tabs, die vor einem Deploy offen waren, was uns nicht trifft, weil DriveFlow keine verwendet. Und manche Muster in headers() greifen anders als in Next.js. Unsere haben wir auf dem Test-Worker geprüft, und wir prüfen sie nach jeder Änderung an der next.config.ts wieder.

Vercel vs. Cloudflare: Was kostet das ein kleines Team?

Vercel Pro kostet 20 Dollar pro Entwickler-Sitz und Monat, mit 20 Dollar Nutzung inklusive. Workers Paid kostet 5 Dollar pro Monat für das ganze Cloudflare-Konto, und Anfragen auf statische Dateien werden nicht verrechnet. Beim heutigen Verkehr von DriveFlow bleiben beide beim Grundpreis. Der Unterschied liegt also bei 15 Dollar pro Sitz und Monat und wächst mit dem Team und dem Verkehr.

Der Gratis-Plan von Workers kommt für eine App dieser Grösse nicht in Frage. Unser Server-Bundle ist komprimiert 4,5 MB gross, Workers Free erlaubt 3 MB, Paid 10 MB. Schneller gebaut wird auch: lokal 26 statt 34 Sekunden, vom Push bis in die Produktion 58 bis 75 statt 85 bis 100 Sekunden.

Lohnt sich der Wechsel weg von Vercel?

Wenn deine Nutzer und deine Datenbank in einer Region sitzen und Vercel deine Funktionen in einer anderen ausführt, zahlt sich der Umzug zuerst bei der Latenz aus und erst dann beim Geld. Wenn deine App stark auf Server Actions setzt oder heute schon Skew-Schutz braucht, wart, bis diese Issues geschlossen sind.

Wenn du es versuchst, halt dich an diese Reihenfolge. npx vinext check laufen lassen. Denselben Commit auf eine workers.dev-URL deployen und sie zuerst auf noindex setzen. Beide Hosts abwechselnd messen, nicht nacheinander. Dann alles, was eine Datei erzeugt, von PDFs bis zu Vorschaubildern, nebeneinanderlegen. Diesen letzten Schritt nimmt dir keine Testsuite ab.

Hat sich der Umzug weg von Vercel gelohnt?

Für uns ja. Die App ist für die Leute, die sie nutzen, schneller, und sie kostet weniger als der Vercel-Plan, den wir gebraucht hätten. Den Ausschlag gab das Kontomodell. Meinen Kollegen Nino ins Cloudflare-Konto einzuladen, kostete nichts, also arbeiten wir zu zweit in einem Konto mit einem Workers-Paid-Plan, vorerst für 5 Dollar im Monat. Cloudflare Tunnel ist ebenfalls gratis und gibt einem internen Dienst eine öffentliche Adresse, ohne dass ein Port offen sein muss. Darum blieb es nicht bei DriveFlow: Der Rest unserer Infrastruktur ist ins selbe Konto umgezogen.

Eine produktive App umziehen, ohne dass ihre Nutzer es merken, ist die Art Webentwicklung, die wir für Agenturen übernehmen. Das Audit, das DriveFlow vor dem Pilot durchlaufen hat, steht in was wir prüfen, bevor ein Betrieb damit arbeitet.

Die Leistung dazu

Webentwicklung im DetailDer grösste Teil der Kosten fällt im zweiten Jahr an, also bauen wir dafür.

Fragen dazu.

Ist vinext bereit für den produktiven Einsatz?

DriveFlow läuft seit dem 27. Oktober 2026 produktiv darauf, und es hält. Jung ist es trotzdem: Version 1.0 kam am 28. September 2026, neue Releases erscheinen etwa wöchentlich, und rund um Deployments sind Issues offen, etwa leere 503-Antworten direkt nach einem Deploy und fehlender Skew-Schutz. Prüf die offenen Issues gegen deine eigene App, bevor du wechselst.

Was ist der Unterschied zwischen vinext und OpenNext?

OpenNext nimmt die Ausgabe von next build und übersetzt sie in einen Cloudflare Worker, der echte Next.js-Compiler bleibt also im Spiel. vinext ist Cloudflares Neuimplementierung der Next.js-API auf Vite und baut den Worker selbst. Es liest dasselbe app-Verzeichnis und dieselbe next.config.ts, aber darunter steckt ein anderes Framework, das mit Next.js Schritt halten muss.

Ist Cloudflare für Next.js schneller als Vercel?

Für uns, gemessen aus der Schweiz, ja: tiefere Median-Time-to-First-Byte auf jeder getesteten Seite. Das meiste davon kommt daher, dass der Worker in Zürich neben unserer Datenbank läuft, während Vercel unsere Funktionen in Frankfurt ausführte. Mit Nutzern oder einer Datenbank anderswo kann das Ergebnis anders aussehen.

Was kostet Cloudflare Workers im Vergleich zu Vercel?

Workers Paid kostet 5 Dollar pro Monat für das ganze Konto, mit 10 Millionen Anfragen und 30 Millionen CPU-Millisekunden inklusive, und Anfragen auf statische Dateien werden nicht verrechnet. Vercel Pro kostet 20 Dollar pro Entwickler-Sitz und Monat, mit 20 Dollar Nutzung inklusive. Beide Preise stammen von den Preisseiten am 26. Oktober 2026.

Läuft eine Next.js-App auf dem kostenlosen Workers-Plan?

Unsere nicht. Ihr Server-Bundle ist komprimiert 4,5 MB gross, Workers Free erlaubt 3 MB, Workers Paid 10 MB. Dazu begrenzt der Gratis-Plan jede Anfrage auf 10 ms CPU-Zeit, was für serverseitiges Rendering knapp ist.

Erzähl uns, was du bauen möchtest.

Baut ihr etwas in diese Richtung? Erzähl uns, was du bauen möchtest.

Weiterlesen

  1. Was wir prüfen, bevor ein echter Betrieb damit arbeitetProdukt4 Min. Lesezeit
  2. Warum ein eigenes Modell in der Schweiz Sinn ergeben kannKI5 Min. Lesezeit
  3. Anthropic hat Git verlassen. Lehrreich ist der Grund.Engineering6 Min. Lesezeit