Cache configuration for nuxt app

Hello all!

I have a a nuxt app (SSR) living at mairie-poullaouen.fr that fetches data from Directus.

the homepage has a component that shows the 3 last “actualités” from Directus.
There is a “actualites” page that shows all of the “actualités” from Directus.

the problem: When I post a new “actualité” in Directus, it doesn’t show up on the homepage. Then, if I navigate to the “actualites” page, the new article is displayed. If I navigate back to the homepage, the new article is now shown. But, if I refresh the page, it’s no longer visible.

After testing, I realised that the homepage is being cached and visitors get older versions.

I tried editing the netlify.toml file in two ways:

[[headers]]
for = "/*"
[headers.values]
Cache-Control = "no-cache"

and

[[headers]]
for = "/*"
[headers.values]
Cache-Control = "max-age=0, must-revalidate, public"

but the problem persists…

For now, I created a webhook in Directus that triggers a new build everytime a new article gets posted, updated or deleted. But It seems a bit overkill…

my questions:
Why is the homepage cached, but not the second page?
Who could be responsible for this cache situation? Netlify? Nuxt? the browser?
What should I do to make sure that the latest articles posted are being shown on the homepage?
Knowing that most of the other pages won’t be updated often, what would be the best way to allow some pages to be cached, but not other?

Thanks in advance!

Eric

Hey @Posoroko,

We can try some things to be sure or at least eliminate some options.

Firstly, I’d advise not manipulating the headers yourself - they’re anyways not working considering this is a SSR app, but it would be good to get them out of the equation.

Then, you can test for the browser cache issue. Whenever you see this issue on your custom domain, you can try to visit the deploy permalink:

to see if the problem exists. If not, it’s most likely a browser cache issue. If yes, keep reading…

Then, try to capture the x-nf-request-id headers or the HAR file recordings of the issue. You can share those with us, and we can check from our end about the issue. This would help us boil it down to if it’s a Netlify or a Nuxt issue.

HI!
Thanks for taking the time to help me out!
I don’t have time to work on it right now, but I’ll test it on tuesday.

Thanks again I’ll be back with the results in a few days…