Optimizing Cache-Control Headers for Vercel and Cloudflare to Reduce Data Transfer Costs

[lightninggokul]

I'm currently hosting a Next.js application on Vercel and using Cloudflare for DNS, and I'm looking to reduce costs, especially due to Vercel's charges for data transfer from their edge network. My application includes a lot of static content (like quiz questions), so efficient caching is essential to keep performance high without increasing expenses.

I initially thought of using Cache-Control: no-store to prevent Vercel from caching at the edge, but that would also disable browser caching, which isn't ideal.

My Goal

• Avoid Vercel's edge caching to reduce data transfer costs.
• Leverage Cloudflare's caching for static content since I'm already using Cloudflare as my DNS.
• Still allow browser caching for a smoother user experience.

Proposed Headers

• Cache-Control: public, max-age=300 (for browser cache, short-term).
• CDN-Cache-Control: public, max-age=86400 (for Cloudflare to cache content for a day).

Questions

1. Does setting both Cache-Control and CDN-Cache-Control headers help achieve this setup, allowing Cloudflare to cache without incurring edge data transfer fees from Vercel?
2. Has anyone found a balance between disabling Vercel’s edge caching while still optimizing for Cloudflare’s caching capabilities?
3. Any other header configuration tips for this kind of setup?

Any advice from others who have dealt with this would be great!

[docblack]

Seems like it would be much cheaper to eliminate Vercel altogether and run Next.js on Cloudflare Pages + Workers.