Cloudflare Pages эсвэл Vercel: bandwidth өсөхөд $20-ын тав тух үнэтэй болно

Статик файл их түгээдэг сайтанд Cloudflare Pages зардлын давуу талтай. Харин Next.js-ийн сервер талын ажиллагаа, preview болон ISR багийн өдөр тутмын ажилд чухал бол Vercel Pro сонголт болж чадна. Vercel Pro-ийн нөхцөлд сарын платформын төлбөр $20; үүнд байршуулалт хийх эрхтэй нэг хэрэглэгч, сарын $20 хэрэглээний кредит, Flat Rate CDN-ийн суурь багцын нэг сая хүсэлт ба 1 TB дамжуулалт багтана.

Cloudflare Pages-ийн үнийн давуу тал нь серверийн код ажиллуулахгүйгээр статик файл түгээх үед хамгийн тод харагдана. Cloudflare Workers-ийн үнийн нөхцөлөөр статик файлын хүсэлт үнэгүй, хязгааргүй; Pages Functions нь Workers-ийн хэрэглээнд тооцогддог, Workers Paid сарын доод төлбөр $5 бөгөөд уг үйлчилгээ дамжуулсан өгөгдөлд тусдаа egress төлбөр авдаггүй. Иймээс зураг татах хүсэлт болон хэрэглэгч бүрт код ажиллуулах хүсэлтийг нэг төрлийн traffic гэж үзвэл хоёр платформын зардлыг буруу харьцуулна.

Үнэ тооцох дөрвөн өөр хэмжигдэхүүн

Сарын хүсэлтийн тоо дангаараа нэхэмжлэхийг тайлбарлахгүй. Хэрэглэгчид хүрсэн өгөгдлийн хэмжээ, CDN-ээр үйлчлүүлсэн хүсэлт, серверийн код ажиллуулсан хүсэлт, шинэ хувилбар бүтээсэн давтамжийг тусад нь харна. Нэг хуудас нээгдэхэд олон зураг, фонт, скрипт татагдаж болно. Харин жижиг JSON хариу бага өгөгдөл дамжуулсан ч function ажиллуулах шаардлагатай байж болно.

Vercel-ийн суурь CDN багц хүсэлт болон дамжуулалтыг хоёуланг нь хэмждэг. Эдгээрийн аль нэг нь өссөнөөр төлбөр шууд нэмэгдэнэ гэж үзэх үндэсгүй: сонгосон CDN багц, өсөлт түр зуурынх уу эсвэл тогтмол уу, мөн бусад төлбөртэй хэрэглээ бий эсэхээс сарын дүн хамаарна. Cloudflare талд ч статик түгээлтийн нөхцөлийг динамик код, өгөгдлийн сан, файл хадгалалтын өртөгт шилжүүлэн хэрэглэж болохгүй. Ялангуяа хэрэглэгч бүрт өөр хуудас үзүүлдэг аппад дамжуулсан хэмжээ бага байсан ч ажиллуулах код нь шийдвэрлэх хэмжигдэхүүн болж болно.

Pages-ийн build ба файлын хязгаар

Статик түгээлтийн үнэ бага байх нь Pages дээр байршуулж болох файлууд болон бүтээх давтамж хязгааргүй гэсэн үг биш. Cloudflare Pages-ийн хязгаарын жагсаалтад Free багцад сард 500 build, нэг зэрэг нэг build, сайт бүрт 20,000 файл, нэг файлд 25 MiB, данс бүрт 100 төсөл гэж заасан; build 20 минутын дараа хугацаа дуусна. Эдгээр нь зочдын татсан өгөгдлийн хэмжээнээс тусдаа нөхцөл юм.

Энгийн танилцуулгын сайтад файлын тоо, build-ийн хугацаа бараг анзаарагдахгүй байж болно. Харин олон хэл дээрх олон мянган хуудас үүсгэдэг сайт шинэ хувилбар бүрт файлын дээд хэмжээнд ойртож мэднэ. Байнгын шинэчлэлттэй контентын санд build-ийн тоо, хугацаа илүү чухал. Том эх зураг эсвэл татаж авах файлыг Pages-ийн сайттай хамт байрлуулахын оронд объект хадгалалт ашиглавал R2 ба S3-ийн таталтын өртгийг байршуулалтын өртгөөс салгаж тооцох шаардлагатай.

Full-stack Next.js-д Pages ба Workers-ийг ялгана

Next.js-ээр хийсэн статик сайт болон сервер талын боломж ашигладаг апп Cloudflare дээр ижил замаар байршихгүй. Cloudflare-ийн Next.js заавар статик export-ыг Pages-д байрлуулахыг, харин сервер талын дүрслэл, React Server Components, Server Actions, route handlers болон middleware ашигладаг full-stack аппад Workers дээрх vinext-ийг зөвлөдөг. Тиймээс Vercel-ээс Pages рүү шилжихдээ build-ийн тохиргоо солих төдий ажил гэж төсөвлөх нь эрсдэлтэй.

Pages Functions-ээр жижиг API ажиллуулах боломжтой ч энэ нь бүрэн Next.js аппын бүх зан төлөв автоматаар хадгалагдана гэсэн үг биш. Шилжилтийн ажлыг маршрут бүрээр нь ялгаж ойлгоно: урьдчилан бүтээсэн файл шууд түгээгдэж байна уу, эсвэл хүсэлт ирэхэд код өгөгдөл авч хариу үүсгэж байна уу? Динамик хэсэг олон байх тусам runtime, санах ой, cache, нэвтрэлт болон гаднын үйлчилгээтэй холболтыг шинэ орчинд тааруулах ажил нэмэгдэнэ. Ингэж салгаснаар Pages-ийн статик түгээлтийн давуу талыг Workers дээр ажиллах бүх хүсэлтэд андуурч хэрэглэхгүй.

Vercel-ийн төлбөр ажлын урсгалд юу өгдөг вэ

Vercel-ийн давуу тал хамгийн тод харагдах орчин нь идэвхтэй хөгжүүлдэг Next.js апп. Vercel-ийн Next.js баримтад pull request бүрт preview URL үүсгэх, ISR-ээр сайтыг дахин deploy хийхгүйгээр агуулга шинэчлэх, сервер талын дүрслэлийг Vercel Functions-ээр ажиллуулах урсгалыг тайлбарласан. Эдгээрийг тогтмол ашигладаг багт суурь төлбөр нь зөвхөн файл байрлуулах үнэ биш, хөгжүүлэлт ба нийтлэлийн уялдааны үнэ болно.

Гэхдээ preview нь зөвхөн Vercel-д байдаг боломж биш; Pages ч урьдчилан харах deploy дэмждэг. Ялгаа нь тухайн багт ямар урсгал хэрэгтэйд оршино. Статик сайтанд шинэ хувилбарыг build хийж нийтлэхэд хангалттай байж болно. Харин хэрэглэгчийн хэсэг, сервер талын маршрут, дахин үүсгэгдэх контенттой SaaS-д preview дээр шалгасан өөрчлөлт production орчинд адил ажиллах нь илүү чухал. Төлбөрийг зөвтгөх эсэх нь боломжуудын нэрсээс илүү тэдгээрийг баг хэр олон удаа ашиглаж, өөр орчинд дахин тохируулахад хэр их ажил гарахаас хамаарна.

Гурван ачаалалд сонголт хэрхэн өөрчлөгдөх вэ

Дараах тоонууд нь бодит хэрэглэгчийн тайлан биш, харьцуулалтыг тодорхой болгох нөхцөлт жишээ юм. Төсөл бүрт сарын нийт хүсэлтээс динамик хүсэлтийг салгасан бөгөөд сарын төлбөрийг яг таг таамаглах зорилгогүй. Function-ийн ажиллах хугацаа, хадгалалт, нэмэлт багц болон одоо ашиглаж буй системээс шилжих ажил эцсийн дүнг өөрчилнө.

• Статик landing page. Сард 300,000 файлын хүсэлт, 15 GB дамжуулалт, 30 build, function-ийн хүсэлтгүй гэж төсөөлье. Pages-ийн статик түгээлтийн загвар энэ хэрэгцээнд сайн таарна. Vercel дээр байгаа бол зөвхөн сарын платформын төлбөрийг бус, багийн ашигладаг preview болон байршуулалтын урсгалыг нүүлгэх ажлыг хамт үнэлнэ. Ийм жижиг төсөлд шилжих нэг удаагийн хөдөлмөр сарын хэмнэлтээс удаан хугацаанд их байж болно.
• Next.js SaaS. Сард 2 сая нийт хүсэлт, 50 GB дамжуулалт, 200 build, тэдгээрээс 200,000 динамик маршрутын хүсэлт гэж авъя. Энд bandwidth-аас илүү сервер талын логик, ISR, нэвтрэлт болон preview-ийн нийцэл сонголтыг шийднэ. Cloudflare талын тооцоог зөвхөн Pages-ийн статик үнийн загвараар гаргаж болохгүй; full-stack хэсгийг Workers-ийн runtime, хэрэглээ болон шилжүүлэх ажилтай нь тооцно.
• Медиа ихтэй сайт. Сард 10 сая хүсэлт, 2 TB дамжуулалт, 100 build, 50,000 динамик хүсэлт гэж төсөөлье. Зураг, татаж авах файл давамгай бол Cloudflare-ийн статик түгээлт илүү сонирхолтой болно. Vercel-ийн суурь CDN багцтай харьцуулахад энэ ачаалал илүү өндөр багтаамж шаарддаг ч сарын нэмэлт төлбөрийг зөвхөн энэ хоёр хэмжээнээс тогтоож болохгүй. Том файлыг Pages-ийн хэмжээний хязгаарт багтаах, эсвэл тусдаа хадгалалт руу гаргах эсэх нь мөн зардлын нэг хэсэг.

Шилжих өртөг сарын үнийн зөрүүг өөрчилнө

Байгаа төслийг нүүлгэхэд домэйн заахаас гадна build тохиргоо, орчны хувьсагч, динамик маршрут, cache-ийн зан төлөв, зураг боловсруулах арга болон preview холбоосууд нөлөөлнө. Статик landing page-д эдгээрийн ихэнх нь энгийн байж болно. Full-stack Next.js SaaS-д runtime болон сервер талын боломжуудыг дахин тохируулах ажил томордог. Сарын зардал буурах боломжийг энэ нэг удаагийн ажил, цаашдын засвар үйлчилгээтэй хамт харьцуулах нь илүү бодитой.

Иймээс статик файл давамгай, Pages-ийн build ба файлын хязгаарт багтдаг төсөлд Cloudflare-ийн үнэ давуу талтай. Next.js-ийн сервер талын ажиллагаа, ISR болон багийн preview урсгал өдөр тутмын хэрэгцээ бол Vercel-ийн төлбөр утгатай байж болно. Медиа ихтэй full-stack төсөлд хоёр дүгнэлт зэрэг үнэн байж болно: статик түгээлтийг Cloudflare дээр хямд зохион байгуулах боломжтой, харин динамик аппыг шилжүүлэх хөдөлмөр өндөр. Тэр заагийг тодорхойлох зүйл нь нийт traffic бус, хүсэлт бүр ямар ажил хийлгэж байгаа явдал юм.

Мөн уншаарай:

• Cloudflare R2 эсвэл Amazon S3: таталт ихсэхэд egress сонголтыг шийднэ
• Skool эсвэл Circle: $9-ын эхлэл өсөхөд 10%-ийн шимтгэл хамгийн үнэтэй болно
• Supabase эсвэл Firebase: үнэгүй quota өсөхөд өөр төрлийн төлбөр болдог