Using Vercel as a Standalone CDN

Vercel's external rewrites let you proxy and cache content from external websites or APIs through their global edge network, providing up to 60% latency reduction, 97% connection reuse to reduce origin load, and global edge caching. You can manage your CDN configuration as code with vercel.json and easily rollback changes through deployment history, and leverage Vercel's firewall protection across all your properties—all without requiring any code changes on your origin server.

Before getting started, find an existing Vercel Project or create a Vercel Project to define your CDN configuration in. With a Vercel Project, you'll be able to set up Firewall rules, view information in the Vercel Dashboard, and test before the CDN changes roll out to production.

Create a vercel.json file with rewrites to proxy requests:

{
  "rewrites": [
    {
      "source": "/:path*",
      "destination": "https://your-external-site.com/:path*"
    }
  ]
}

For detailed caching options, see the Edge Cache documentation.

Option 1: Respect Origin Cache Headers

Use to respect the origin's Cache-Control:

{
  "headers": [
    {
      "source": "/:path*",
      "headers": [
        {
          "key": "x-vercel-enable-rewrite-caching",
          "value": "1"
        }
      ]
    }
  ]
}

Option 2: Origin Headers (Recommended)

Add to your external API responses:

CDN-Cache-Control: max-age=3600

Option 3: Vercel Config

{
  "rewrites": [
    {
      "source": "/:path*",
      "destination": "https://your-external-site.com/:path*"
    }
  ],
  "headers": [
    {
      "source": "/:path*",
      "headers": [
        {
          "key": "CDN-Cache-Control",
          "value": "max-age=3600"
        }
      ]
    }
  ]
}

Once configured and tested, connect your domain to the Vercel project to start serving traffic proxied through Vercel. Now you can configure additional Firewall rules or look at Observability for your traffic.

Vercel allows you to modify your CDN configuration and test changes in Preview before they ever are released to production. When making a change to your CDN configuration, open up the Vercel Dashboard, find the Preview deployment, and use the unique URL to make sure that the changes work before promoting the changes.

API Proxy:

You can use rewrites to serve your API workload on the same domain as your UI while hosting the API workload in a different location than your UI.

{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://api.backend.com/:path*"
    }
  ]
}

Multiple Origins:

Vercel's CDN can be configured to proxy requests to multiple origins in a single configuration. This is useful for consolidating rules in a single place.

{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://api.backend.com/:path*"
    },
    {
      "source": "/:path*",
      "destination": "https://main-site.com/:path*"
    }
  ]
}

Learn more by visiting the Vercel CDN documentation.