Skew Protection

Version skew occurs when different versions of your application run on client and server, causing application errors and other unexpected behavior. For example, imagine your newest deployment modifies the data structure by adding a required field to a user's profile. Older clients wouldn't expect this new field, leading to errors when they submit it.

Vercel's Skew Protection resolves this problem at the platform and framework layer by using version locking, which ensures client and server use the exact same version. In our example, outdated clients continue to communicate with servers that understand the old data structure, while updated clients use the most recent deployment.

By implementing Skew Protection, you can reduce user-facing errors during new rollouts and boost developer productivity, minimizing concerns about API compatibility across versions.

If you are using one of the supported frameworks, you can enable Skew Protection in your project settings.

1. Select the project in the Vercel dashboard
2. Select the Settings tab in the top menu
3. Select the Advanced tab in the side menu
4. Scroll down to Skew Protection and enable the switch
5. For Enterprise Teams, you can also set a custom duration (see limitations)

In some cases, you may have problematic deployments you want to ensure no longer resolves requests from any other active clients.

Once you deploy a fix, you can Configure Skew Protection with the following:

1. Select the deployment that fixed the problem in the deployment list
2. Select the button (near the Visit button)
3. Click Configure Skew Protection
4. Click Save to apply the changes

This ensure that deployments created before the fixed deployment will no longer resolve requests from outdated clients.

You can observe how many requests are protected from version skew by visiting the Monitoring page in the Vercel dashboard.

For example, on the requests event, filter where skew_protection = 'active'.

Skew Protection is available with zero configuration when using the following frameworks:

• Next.js
• SvelteKit
• Qwik
• Astro
• Nuxt (coming soon)

Other frameworks can implement Skew Protection by checking if VERCEL_SKEW_PROTECTION_ENABLED has value 1 and then appending the value of VERCEL_DEPLOYMENT_ID to each request using one of the following options.

• dpl query string parameter:
  option1.ts

  const query =
    process.env.VERCEL_SKEW_PROTECTION_ENABLED === '1'
      ? `?dpl=${process.env.VERCEL_DEPLOYMENT_ID}`
      : '';
   
  const res = await fetch(`/get${query}`);

• x-deployment-id header:
  option2.ts

  const headers =
    process.env.VERCEL_SKEW_PROTECTION_ENABLED === '1'
      ? { 'x-deployment-id': process.env.VERCEL_DEPLOYMENT_ID }
      : {};
   
  const res = await fetch('/get', { headers });

• __vdpl cookie:
  option3.ts

  export default function handler(req, res) {
    if (process.env.VERCEL_SKEW_PROTECTION_ENABLED === '1') {
      res.setHeader('Set-Cookie', [
        `__vdpl=${process.env.VERCEL_DEPLOYMENT_ID}; HttpOnly`,
      ]);
    }
    res.end('<h1>Hello World</h1>');
  }

If you are using Next.js 14.1.4 or newer, there is no additional configuration needed to enable Skew Protection.

Older versions of Next.js require additional next.config.js configuration.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    useDeploymentId: true,
    // Optionally, use with Server Actions
    useDeploymentIdServerActions: true,
  },
};
 
module.exports = nextConfig;

If you are using SvelteKit, you will need to install @sveltejs/adapter-vercel version 5.2.0 or newer in order to enable Skew Protection.

Older versions can be upgraded by running npm i -D @sveltejs/adapter-vercel@latest.

If you are using Qwik 1.5.3 or newer, there is no additional configuration needed to enable Skew Protection.

Older versions can be upgraded by running npm i @builder.io/qwik@latest.

If you are using Astro, you will need to install @astrojs/vercel version 7.6.0 or newer in order to enable Skew Protection.

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';
 
export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel({
    skewProtection: true,
  }),
});

Older versions can be upgraded by running npm i -D @astrojs/vercel@latest.

• Skew Protection is only available for Pro and Enterprise, not for Hobby teams
• Skew Protection is enabled for 12 hours on Pro accounts and a custom duration on Enterprise accounts