Vercel of Cloudflare Pages: dataverkeer bepaalt de keuze

Voor een statische zakelijke site is Cloudflare Pages doorgaans de voordeligste keuze: statische verzoeken en bandbreedte leiden daar niet tot gebruikskosten. Voor een webapp met serverlogica bepaalt eerst de runtime of Cloudflare past. Daarna worden dataverkeer, verzoeken en rekentijd belangrijker voor de kosten dan een klein verschil in gemeten responstijd.

Dat onderscheid wordt vooral zichtbaar bij een verkeerspiek. Een campagne die alleen vooraf gebouwde pagina’s en bestanden levert, belast de prijsmodellen anders dan een app die bij ieder bezoek code uitvoert. Bij Vercel maakt bovendien uit of het vaste CDN-tarief is ingeschakeld en hoeveel verkeer in de hele factuurperiode binnenkomt.

Wat de TTFB-meting laat zien

De TTFB-meting van StackVerified geeft na acht opeenvolgende cachehits per bezochte site medianen van 108 ms voor vercel.com, 110 ms voor nextjs.org, 111 ms voor developers.cloudflare.com en 205 ms voor pages.cloudflare.com. Alle verzoeken kwamen vanaf één particuliere internetverbinding in de VS. Drie uitkomsten liggen dicht bij elkaar; de vierde betreft volgens de onderzoeker een zwaardere pagina.

De meting vergelijkt bestaande websites met verschillende inhoud, geen identieke applicatie die op beide platforms is uitgerold. TTFB meet bovendien de tijd tot de eerste byte, niet tot een pagina bruikbaar is. Voor bezoekers in Nederland en Vlaanderen kunnen de afstand tot een cache, de omvang van bestanden en serverwerk de uitkomst veranderen. Deze cijfers geven dus geen betrouwbare snelheidswinnaar voor een eigen project, maar wel reden om enkele milliseconden verschil niet zwaarder te laten wegen dan het kostenmodel.

Waarom een statische site anders wordt afgerekend

De tarieven van Vercel presenteren Hobby als plan voor persoonlijke projecten met 100 GB Fast Data Transfer en 1 miljoen CDN-verzoeken per maand; Pro kost $20 per maand en bevat $20 gebruikskrediet. Voor een zakelijke vergelijking is Pro daarom het bruikbare uitgangspunt. CDN-verzoeken en overgedragen data blijven afzonderlijke gebruikseenheden, al kan het vaste CDN-tarief op Pro de afrekening daarvan veranderen.

Een statische pagina kan uit HTML, CSS, JavaScript en afbeeldingen bestaan. Eén bezoek levert dan meerdere verzoeken op, terwijl de totale omvang van de teruggestuurde bestanden het dataverkeer bepaalt. Meer kleine bestanden verhogen vooral het aantal verzoeken; grotere afbeeldingen en downloads verhogen vooral het volume. Die twee grootheden kunnen bij dezelfde bezoekersgroei dus heel verschillend oplopen.

De prijstabel van Cloudflare Workers vermeldt gratis, onbeperkte verzoeken naar statische bestanden en geen afzonderlijke kosten voor uitgaand dataverkeer; Pages Functions vallen onder de Workers-tarieven, waarvan het gratis plan 100.000 verzoeken per dag en maximaal 10 ms CPU-tijd per aanroep toestaat en het betaalde plan vanaf $5 per maand begint. Voor een volledig statische Pages-site veroorzaakt een extra bezoek daardoor geen toeslag voor de levering van die bestanden. Zodra een verzoek een functie uitvoert, telt het in een ander deel van de prijstabel mee.

Bij Next.js komt de runtime vóór de prijs

Bij Cloudflare Pages wordt statisch verkeer anders behandeld dan verzoeken aan Pages Functions.

Een statische Next.js-export kan op Pages worden gepubliceerd. Voor volledige Next.js-apps met onder meer serverrendering en route handlers raadt Cloudflare Workers aan. Een bestaande app rechtstreeks als Pages-project behandelen kan daardoor een verkeerde kostenvergelijking opleveren: eerst moet duidelijk zijn waar de servercode draait en welke aanpassingen daarvoor nodig zijn.

Dat geldt ook voor afhankelijkheden. Workers ondersteunt Node.js-functionaliteit, maar niet iedere bibliotheek of serveraanname gedraagt zich er hetzelfde als in een gebruikelijke Node.js-omgeving. Voor een app met authenticatie, serverrendering of externe opslag moet de ontwikkeltijd voor compatibiliteit naast het maandtarief worden gelegd. Een bestaande Next.js-app kan daardoor op Vercel de eenvoudigere keuze zijn, ook als Cloudflare voor de levering van statische bestanden goedkoper uitvalt.

De grens tussen statisch en dynamisch loopt bovendien per verzoek, niet per website. Een webapp kan afbeeldingen en scripts statisch leveren en tegelijk voor elke paginavraag een functie aanroepen. Alleen het statische deel profiteert dan van onbeperkte gratis bestandsverzoeken; de functieaanroepen en hun rekentijd blijven afzonderlijke kosten of limieten.

Drie scenario’s met dezelfde rekensom

Een hypothetische campagne met sterk groeiend statisch verkeer raakt bij Vercel een CDN-capaciteitsniveau, terwijl Pages statische levering onbeperkt vermeldt.

De volgende aantallen zijn hypothetische invoer, geen gemeten verkeer. Vermenigvuldig bezoeken met megabytes per bezoek voor het dataverkeer en met CDN-verzoeken per bezoek voor het verzoekvolume. Tel dynamische aanroepen apart: vijf opgevraagde bestanden betekenen niet automatisch vijf functieaanroepen. De uitkomsten zijn een vergelijking van de genoemde tariefonderdelen, geen volledige factuur voor opslag, beeldverwerking of andere diensten.

Kleine zakelijke site

Stel dat een statische site per maand 20.000 bezoeken krijgt, gemiddeld 2 MB per bezoek verstuurt en per bezoek vijf CDN-verzoeken verwerkt. Dat komt neer op ongeveer 40 GB en 100.000 verzoeken. Voor Cloudflare Pages blijft de statische levering binnen het gratis prijsmodel. Op Vercel valt dit voorbeeld ruim binnen de inbegrepen CDN-capaciteit, maar voor de zakelijke vergelijking blijft het Pro-abonnement de vaste kostenpost.

Bij deze omvang kan ontwikkelwerk financieel zwaarder wegen dan het verkeer. Een bedrijf dat zijn site al op Vercel beheert, hoeft niet vanzelfsprekend te verhuizen voor een lager hostingtarief. Voor een nieuwe, volledig statische site zonder bijzondere runtime-eisen geeft Pages wel de eenvoudigere uitgangspositie: het aantal bezoekers verandert de prijs voor statische levering niet.

Next.js-app met serverlogica

Stel dat een app 100.000 bezoeken per maand ontvangt, gemiddeld 1 MB per bezoek levert en bij elk bezoek één dynamische route uitvoert. Dan zijn er ongeveer 100 GB dataverkeer en 100.000 functieaanroepen, plus de verzoeken voor statische bestanden. Gelijkmatig verdeeld blijft het aantal functieaanroepen onder de dagelijkse gratis Workers-grens; een geconcentreerde piek kan die grens bereiken. De CPU-limiet en de geschiktheid van de app blijven daarnaast bepalend.

Op Vercel is hetzelfde bezoek zowel relevant voor de CDN-capaciteit als voor het gebruik van functies. Op Cloudflare moet de berekening uitgaan van Workers zodra de volledige Next.js-app daar draait. Een laag bedrag voor bandbreedte maakt een noodzakelijke aanpassing van servercode niet gratis, terwijl een app die grotendeels statisch kan worden gebouwd veel minder functieaanroepen nodig heeft.

Virale, statische campagne

Stel dat een statische campagne in één maand 2 miljoen bezoeken trekt, gemiddeld 3 MB per bezoek levert en vijf CDN-verzoeken per bezoek veroorzaakt. Dat is ongeveer 6 TB dataverkeer en 10 miljoen CDN-verzoeken. Voor statische levering op Pages veroorzaken die aantallen geen toeslag voor verzoeken of bandbreedte. Bij Vercel vallen ze boven de inbegrepen capaciteit van het vaste CDN-niveau op Pro.

De voorwaarden van Vercels Flat Rate CDN noemen voor Pro een inbegrepen niveau van 1 miljoen CDN-verzoeken en 1 TB per maand, gevolgd door een niveau van $20 extra per maand voor maximaal 10 miljoen verzoeken en 50 TB. Als het totale gebruik in een factuurperiode de maandcapaciteit overschrijdt, verschuift het niveau aan het begin van de volgende periode; één drukke dag op zichzelf veroorzaakt geen onmiddellijke verhoging. De hypothetische campagne past qua verzoeken precies op het eerstvolgende niveau, maar de timing van de piek en het totale maandgebruik bepalen wanneer een tariefwijziging speelt.

Een campagne met formulieren, persoonlijke inhoud of een functie die bij elk bezoek draait, verandert ook de Cloudflare-kant van de som. Dan komen functieaanroepen en CPU-tijd bovenop de statische levering. Voor deze drie scenario’s volgt de keuze dus uit het soort verzoek en het verkeerspatroon: Pages heeft het duidelijkste kostenvoordeel bij statische groei, terwijl bij een webapp eerst moet vaststaan dat de gewenste runtime past.