Enabling Skew Protection on a statically rendered app

[bitttttten]

Summary

Hey all,

We have a statically rendered app using Vite and we'd like to enable skew protection on it.

What's the recommended approach for this?

Append the value of process.env.VERCEL_DEPLOYMENT_ID to each request using one of the following:

• dpl query string parameter
• x-deployment-id header
• __vdpl cookie

From the above note in the docs, it seems we'd need to set a cookie. Although I'm wondering what the best practise would be.

Example

No response

Steps to Reproduce

n/a

[gajraj-gan]

Were you able to do it?

[bitttttten]

Yes, I wrote my own vite plugin for it. Do you want me to share it?

[gajraj-gan]

Yes, that would be awesome !

[bitttttten]

@gajraj-gan I published it to npm: https://github.com/bitttttten/vite-vlugin-vercel-skew-protection/

Do you want to give it a look and see if it works for you? There may be some edge cases I have missed, and you might be using a different vite.config than we are, however this works well for us!

[bitttttten]

I would recommend testing this plugin on a test branch of yours on Vercel. Let me know how you get on.

[gajraj-gan]

Thanks @bitttttten ! This looks good, I will test it :)

[gajraj-gan]

hey @bitttttten ! I have tried your plugin, unfortunately my CSS isnt loading anymore lol

[gajraj-gan]

I am not sure why it happened, and how it works in my normal build without this plugin. This is happening on CSS/SCSS modules btw, have you used them in your app?

[github-actions[bot]]

This discussion was automatically locked because the community moved to a new site. Please join us at vercel.community