Vercel Raise Issue Frontity Heading Cache Network Isssue

🙋Get Help
, , , ,
1

Hello Team,

Our website doesn’t give speed performance on Vercel deploy.
Vercel Support Team Raise Issue in frontity framework file settings.

I have tried based on vercel team response but still doesn’t work properly on speed performance and see final last “Mail - 3” which is issue in frontity framework.

Mail - 1:

URL: https://vrinsoftreact-620jkr7do-vrinsoft.vercel.app/

It might be that a header is not set properly by Frontify.

You could try adding the following to your vercel.json.

It will cache requests for 24 hours, but you might want to tweak the value to your liking.

vercel.json

{
“version”: 2,
“builds”: [
{
“src”: “package.json”,
“use”: “@frontity/now”
}
],
“headers”: [
{
“source”: “/”,
“headers” : [
{
“key” : “Cache-Control”,
“value” : “s-maxage=86400, stale-while-revalidate”
}
]
}
]
}

Charles De Mount
â–˛ Customer Success Engineer at Vercel

Mail - 2:

I want to escalate the issue you are encountering to our Infrastructure team.

From what I can see the cache continues to miss due to the Cache-Control configuration.

In this test, we can see that the value is public, max-age=0, must-revalidate which is the default with Vercel.

My hunch is that something is off with that header and the Cache-control in your vercel.json is being overwritten by the response from your Frontify app.

Charles De Mount
â–˛ Customer Success Engineer at Vercel

Mail - 3:

Thank you for your patience.

In short, we have discovered there were some bugs that could happen when defining caching headers inside of route and had to disable that feature on our Edge network.

The issue is that’s what your framework, Frontify, is currently doing. → now-builder/index.ts at master · frontity/now-builder · GitHub

The best path forward would either contact their support team with this information or create an issue in the repository for the Vercel Adapter → GitHub - frontity/now-builder: A Frontity builder for the Vercel hosting

Instead of using routes, they should return the caching headers directly from the functions themeselves.

Hope that highlights the issue.

Please let me know if you have any further questions or concerns.

Best

Charles De Mount
â–˛ Customer Success Engineer at Vercel

Kindly please me as soon possible what i need to change exactly in which file for this kind issue of caching headers.

Thank you,
Pramod

2

Hey Pramod

I am not sure if this is still an issue for you? But in your theme index, you can add an afterSSR that sets the headers correctly - like so:

afterSSR: ({ state, actions }) => async ({ ctx }) => {
    ctx.set("Cache-Control", "s-maxage=1,stale-while-revalidate");
},

Read more about actions here: 6. Actions - Frontity Docs

/Frederik