X-Vercel-Cache:: MISS on SSR using App Directory
Unanswered
Pixiebob posted this in #help-forum
PixiebobOP
It seems no matter what settings i have, i always get MISS. Any ideas?
Current fetch call:
const response = await fetch(API_URL, {
method: "POST",
headers: {
"Content-Type": "application/graphql",
"X-Shopify-Storefront-Access-Token": ACCESS_TOKEN,
},
body: query,
cache: 'force-cache',
next: {
tags: ['inventory'], //tag
revalidate: 60 //time e.g. 60 seconds
}
});
Current fetch call:
const response = await fetch(API_URL, {
method: "POST",
headers: {
"Content-Type": "application/graphql",
"X-Shopify-Storefront-Access-Token": ACCESS_TOKEN,
},
body: query,
cache: 'force-cache',
next: {
tags: ['inventory'], //tag
revalidate: 60 //time e.g. 60 seconds
}
});
22 Replies
Serengeti
The cache header isn't to do with the data fetching. its about the page cache. I think it will only hjit that cache if its a statically generated page (generated at build time)
your fetch call will be cached by the data cache
PixiebobOP
As a comparison: It used to work fine on the Pages Directory using context.res.setHeader(
'Cache-Control',
'public, s-maxage=86400, stale-while-revalidate=3600'
);
In getServerSideProps.
'Cache-Control',
'public, s-maxage=86400, stale-while-revalidate=3600'
);
In getServerSideProps.
Serengeti
your data fetch call is probably being cached its just the page that isnt cached as it isnt statically generated
the cache header is not to do with your fetch call
PixiebobOP
It should still be able to cache the page in the CDN, even if its not static?
Serengeti
I agree, but it seems that currently only happens if your page is static (generateStaticParams) - i assume this is on a dynamic page with page params?
PixiebobOP
Hmm, seems odd to not be able to cache SSR pages, if that is the case. Yes it's on a dynamic route example/[slug] using page params.
Serengeti
yeah i think so. ive had similar thoughts. If you implement generateStaticParams (https://nextjs.org/docs/app/api-reference/functions/generate-static-params) then it will cache the output of the route as you want
but I have had some issues with using that + fetch revalidation
although actually looking at your fetch, because it is a POST request im not sure it will ever be cached?
PixiebobOP
I figured it out
For future reference:
Inside next.config.js add:
async headers() {
return [
{
source: '/example/:slug',
headers: [
{
key: 'Vercel-CDN-Cache-Control',
value: 's-maxage=3600, stale-while-revalidate=1200',
},
],
},
];
}
Inside next.config.js add:
async headers() {
return [
{
source: '/example/:slug',
headers: [
{
key: 'Vercel-CDN-Cache-Control',
value: 's-maxage=3600, stale-while-revalidate=1200',
},
],
},
];
}
Serengeti
is that documented anywhere?
PixiebobOP
Serengeti
im guessing that isnt compatiable with the data caching tho
so if you invalidate a tag thats cached with that it wont refresh immediately but wait until the CDN is expired
PixiebobOP
I guess that would be the logic
Serengeti
yeah that wouldnt work for me as i need the data cache invalidation. glad you got it working for you though
PixiebobOP
Are you using useSearchParams?
Serengeti
In oen of my pages I am, but i wrap it in a suspense boundry