Hi everyone. As I found out, Vercel does not support any cache key customizations based on Vary header or other header manipulation. I am trying find a solution to split edge cache (for html response ) based on device ( mobile, desktop or user agent generally ) in a Nuxt3 project. Vercel support suggested me that I have to use edge middleware alongside rewrites in order to force certain requests to point to the current cache bucket. Current behaviour is that no matter if I add query params or try to rewrite the / into /desktop /mobile via de middleware, it is returning the same cache entry. ( the first one that is called ) I ll attach some code snippets of edge middleware and vercel.json file
export const config = { matcher: "/", // Apply only to the homepage};
export default function middleware(request: Request) { const userAgent = request.headers.get("user-agent") || ""; let deviceType = "desktop";
// Detect mobile device if (/mobile/i.test(userAgent)) { deviceType = "mobile"; }
const url = new URL(request.url);
// Rewrite URL for mobile or desktop if (url.pathname === "/") { url.pathname = `/${deviceType}`; return new Response(null, { headers: { "x-middleware-rewrite": url.toString() }, }); }
return new Response(null, { headers: { "x-middleware-next": "1" }, });}
{ "rewrites": [ { "source": "/mobile", "destination": "/" }, { "source": "/desktop", "destination": "/" } ], "headers": [ { "source": "/mobile", "headers": [ { "key": "Cache-Control", "value": "public, s-maxage=3600, stale-while-revalidate" } ] }, { "source": "/desktop", "headers": [ { "key": "Cache-Control", "value": "public, s-maxage=3600, stale-while-revalidate" } ] } ]}
Do you have any suggestions or better knowledge regarding this topic? I appreciate any answers! Thanks
