Support Vercel's skew protection

[Nick-Mazuk]

Describe the problem

Vercel's skew protection is in beta, but currently only NextJS supports it. Adding this to Sveltekit eliminates entire classes of problems/bugs.

See also:

• https://vercel.com/docs/deployments/skew-protection
• https://vercel.com/blog/version-skew-protection

Describe the proposed solution

https://vercel.com/docs/deployments/skew-protection

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

[eltigerchino]

I'm curious if it would be as simple as patching the window.fetch object of start.js to pass the deployment id during adapter-vercel's build (seems a bit hacky though). https://vercel.com/docs/deployments/skew-protection#additional-request-types I don't really understand how it works. Seems to be just passing the 'X-Deployment-Id' header for any client requests to the server?

/**
 *
 * @param {import('@sveltejs/kit').Builder} builder
 * @param {string} static_dir
 */
function enable_skew_protection(builder, static_dir) {
	const app_path = builder.getAppPath();
	const client_entry_path = path.join(static_dir, app_path, 'immutable/entry');

	const start_file_name = fs
		.readdirSync(client_entry_path)
		.filter((filename) => filename.startsWith('start'))[0];
	const start_file_path = path.join(client_entry_path, start_file_name);
	const start_file = fs.readFileSync(start_file_path);

	const skew_protection_patch = `const native_fetch=window.fetch;window.fetch=(e,t)=>(t.headers["X-Deployment-Id"]=${process.env.NEXT_DEPLOYMENT_ID},native_fetch(e,t));`;

	write(start_file_path, skew_protection_patch + start_file);
}

[jean343]

If this helps, it was done in vite with:

export default defineConfig({
  experimental: {
    renderBuiltUrl(filename) {
      return `${filename}?dpl=${process.env.VERCEL_DEPLOYMENT_ID}`;
    },
  },
});