3 Cloudflare Page Rules to Halve Your Bandwidth Costs
Stop serving static assets from your origin server. Cache aggressively at the edge.
Bandwidth is expensive. If you are serving images, fonts, or JS bundles from your origin server, you are throwing money away.
Set up these Cloudflare Page Rules:
-
Cache Everything on static routes
- URL Match:
*yourdomain.com/_next/static/* - Setting: Cache Level -> Cache Everything, Edge Cache TTL -> 1 month.
- URL Match:
-
Bypass Cache on API routes
- URL Match:
*yourdomain.com/api/* - Setting: Cache Level -> Bypass
- URL Match:
-
Browser Cache TTL for Images
- URL Match:
*yourdomain.com/images/* - Setting: Browser Cache TTL -> a year
- URL Match:
By default, Cloudflare respects origin headers. Forcing "Cache Everything" ensures requests never hit your server.
Tags
Related Blogs
Migrating from TanStack Start to Next.js App Router: An Architecture Post-Mortem
A deep dive into why we moved our entire CMS away from Vite SSR and TanStack Router, the performance implications of Server Components, and the hydration traps we had to fix.
Debugging SSR Runtime Crashes on Vercel: Node vs Edge
When your Next.js app works perfectly on localhost but throws 500s on Vercel. A deep dive into Node runtimes, the Edge network, and how to debug elusive server-side crashes.
Dockerizing Next.js for Standalone Production Deployments
Vercel is great, but sometimes you need to host Next.js on your own Kubernetes cluster or VPS. Here's the optimal multi-stage Dockerfile for Next.js App Router.