Using Vercel as a Standalone CDN

Copy link to headingWhy Use 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.

Copy link to headingBasic Setup

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.

Copy link to headingStep 1: Configure Routing

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

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

Copy link to headingStep 2: Enable Caching

For detailed caching options, see the Edge Cache documentation.

Copy link to headingOption 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"
        }
      ]
    }
  ]
}

Copy link to headingOption 2: Origin Headers (Recommended)

Add to your external API responses:

CDN-Cache-Control: max-age=3600

Copy link to headingOption 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"
        }
      ]
    }
  ]
}

Copy link to headingStep 3: Configure the domain

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.

Copy link to headingStep 4: Test before releasing to production

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.

Copy link to headingCommon Patterns

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*"
    }
  ]
}

Copy link to headingLearn More

Learn more by visiting the Vercel CDN documentation.