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?
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.
Hello!
I’m back aftera few weeks where I didn’t have the time to take care of this problem.
The “preview” button in Netlify shows the page with the missing article. So I suppose the problem comes from the browser …
I’ve been trying to figure things out, but I’m a bit lost. I can’t figure out what request represents the cached component. Like I said, once on the home page (with the last article not showing) if you navigate to the “actualité” page, the latest article shows up and I can easyly see the request that was made to Directus. If I navigate back to homepage, the same request is made. But if I refresh either of those pages, the latest article isn’t visible.
Because it uses SSR, isn’t it normal that the request doesn’t show up ?
mairie-poullaouen.fr is where the site lives. I left a “test” article in there so I can test the problem. Can you guys check it out and help me finding the request we are looking for?
On the home page, if you scroll down a bit you will see a “voir toutes les actualités” button. This will bring you the the other page where the articles are displayed.
I really appreciate that you take time to help me out and I wish I could be more helpfull …
Both links wont show the article on first visit. It shows up only if you navigate to the next page through a link on the web site.
Once you see the article, if you refresh the page, the article wont show up again.
if I trigger a new build in Netlify, the article will show up everytime as expected.
Hi Sam!
Yes I am. I had to rebuild the app, do it would show the latest articles. But I can create another test article so you can see it. I’ll do this now.
But basically, the problem is still exactly how I described it.
I tried to check this issue further and this is what I can understand:
Your index.html is generated during the build time. This means, whatever data you’re sending during your site’s build is being included in index.html. Now, if you try going to:
view-source:https://mairie-poullaouen.fr/
You’d notice that, that page doesn’t have the new test article added to it. This means, something is going wrong during the site’s build time, which is causing the site to not fetch and include the latest data on the index.html.
Finally, when you come back to home page from the second page, the article is now preset. This could be because you might be saving the response from the fetch call to a store or some temporary storage inside your application and rendering the data from that.
What you can do:
Either figure out, why the site’s home page is not pulling the latest data during the build time
OR make the same fetch call from your home page as well and render the data accordingly.
you are right, index.html is created at build time. But, I have not rebuilt the site after adding the new “test” article. If I do rebuild it, then the new article shows up.
The site was created, with nuxt. Both pages share the same fetch request, that’s why the test article shows up when you come back to the home page. Index use cached data but the other page fetch the needed data from the db. Both pages use the same code for the fetch request.
What ever is in the DB when netlify builds the site stays in the index.html forever. That’s whhy I suspect a cache config problem. If I don’t request a new build, the same articles will be displayed.
To make it work, I’ve set up a webhook in Directus that triggered a new build in netlify. It worked fine. Whenever someone posted a new article, the site was rebuilt in netlify. But it seems a bit overkill, and it was using all my build minutes.
My goal is to have the index.html fetch the latest articles everytime the site is visited. They add new articles often, so the site needs to stay up to date.
hmm I don’t unserstand why though. The code is there and makes a fetch request to Directus.
It works fine when I run the dev server locally. Every time I refresh, it fetches the articles and the latest ones show up.
It’s only once it’s deployed that the problem arrives. That’s why I suspected cache problem.
In nuxt, you can name the fetch requests so if you make the same request twice, the app knows it’s already been made and uses the cached data instead of fetching it again. That’s what’s happening (I think) between the two pages.
But, why isn’t it fetching the data when the site is first loaded? Where is it getting the data from?
It looks like the index.html is static. But I didn’t configure it this way.
Thanks again for taking the time to help me out, I really appreciate it!
As Hrishikesh has pointed out, that is not what you have deployed, even if it is what you wrote and intended to deploy.
This is what you’ll need to figure out Netlify didn’t write the code; our staff can’t see the code - only you can (our staff has no permission to view your source code, only our build network can access it).
A good way to debug this is to use netlify dev (and the rest of our CLI, including netlify build to create a copy of the code in the same way we do, to run locally), and perhaps there you can see / remove the index.html file to see if that allows your dynamic code to be run instead?
