Conceptual
3 min read

Skew Protection

Learn how Vercel's Skew Protection ensures that the client and server stay in sync for any particular deployment.
Table of Contents

Skew Protection is available on Pro and Enterprise plans

Those with the owner, admin, member role can access this feature

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)
A screenshot of the Skew Protection section containing an enabled/disabled toggle switch.
A screenshot of the Skew Protection section containing an enabled/disabled toggle switch.

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.

A screenshot of the popover menu containing a menu item for Configure Skew Protection.
A screenshot of the popover menu containing a menu item for Configure Skew Protection.

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'.

A screenshot of a query of requests filtered by active skew protection.
A screenshot of a query of requests filtered by active skew protection.

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

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.

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

The useDeploymentId configuration enables Skew Protection for all framework-managed static file requests from your Next.js app such as for JavaScript and CSS files. You can also opt-into Skew Protection for Next.js Server Actions with useDeploymentIdServerActions.

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.

  • Skew Protection is only available for Pro and Enterprise, not for Hobby accounts
  • Skew Protection is enabled for 12 hours on Pro accounts and a custom duration on Enterprise accounts
Last updated on June 15, 2024