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