Cloudflare Pages

Cloudflare Pages Review and Features

Written by Thom Krupa

Last update: 6/7/2024

World-class CDN

Cloudflare is known best as an impressive and one of the fastest global content delivery networks (CDN). With more than 200 data centers around the world, Cloudflare CDN is one of the biggest free networks.

For years Cloudflare has been investing in the Internet, improving its security, offering a free CDN, DNS, DDoS attack mitigation, SSL, and many other products like Argo.

Cloudflare has spotted an opportunity in static site evolution. New products like Workers and Pages feel like a natural way of growing the Cloudflare product portfolio.

Zero cold start edge functions

A common issue of serverless functions like AWS Lambda is a cold start. The time that function needs to execute for the first time. Cloudflare Workers essentially run instantly, because of 0ms cold start, they can be used as an entry point for your website. That enables endless dynamic enhancements for static files.

HTMLRewrite class is a part of Workers Runtime API. Imagine a jQuery-like API to modify HTML response directly on the CDN with no server involved. Based on HTTP headers like Cookie, you can change content, styles, or scripts included on the page.

CI/CD with no user, sites, and bandwidth limits

Pages are the most recent Cloudflare product, and essentially it is a CI/CD. Connect Github repo, configure build script and automatically deploy a website.

Currently, it's a beta, and you can start for free with a quite generous plan: unlimited sites, users, and bandwidth.

Server-side analytics

Server-side analytics are based on CDN logs and are not affected by ad-blockers. It's a secure, privacy-friendly way of collecting essential data like unique requests. Bonus: all of it available through GraphQL Analytics API if you want to create a custom dashboard.

Conclusion

Cloudflare Pages is one of the most interesting solutions for Jamstack projects. Thanks to Workers, you can run JS straight on the Edge, modify HTML response, or use it for auth. Pages are still in beta and quite new. So it might be a perfect moment to test it out on your personal projects and gradually introduce it to your company.

[@portabletext/react] Unknown block type "prosCons", specify a component for it in the `components.types` prop