Does getStaticProps revalidation work on Netlify? I have changed an image on the backend and have a revalidation set to 60 seconds. It has been about 20 minutes and still the old image is there. Either it is not supported or I am missing something additional required for it to work on Netlify. It is working as expected on Vercel.
Hey @Crazyhorse
As per getStaticProps documentation it is called at build time
If you export an
asyncfunction calledgetStaticPropsfrom a page, Next.js will pre-render this page at build time using the props returned bygetStaticProps.
It then goes on to mention
revalidate- An optional amount in seconds after which a page re-generation can occur (defaults to:falseor no revalidating). More on Incremental Static Regeneration
The post Next.js ISR support gives a great explaination of Next.js ISR on Netlify. Remember that Netlify builds are immutable meaning
Immutable deployment – Guarantee the integrity of previous deploys by insulating them from future actions.
Hope this clears things up.
Hi @coelmay , thanks for your response. I still don’t understand though why revalidate isn’t working on Netlify yet it is on Vercel. I have fallback set to ‘blocking’ and a revalidate time of 60 seconds. As mentioned, this is working on Vercel in that I can change an image in WordPress and when I refresh after said time, I will see the new image on the frontend. This isn’t the case with Netlify so that is why I basically asked if it is supported/not supported or how can I get it to work if it is supported.
Because Netlify and Vercel are different platforms, they work in different ways.
When you deploy your site to Netlify, it is immutable (as previously mentioned) meaning that all components (pages, scripts, styles, images) are set and not alterable without a new deploy. If you are fetching data to include in a page at browse time (e.g. via an API) rather than at build time, that is a different story. If the information at the API endpoint is changed, then the information returned, and thus the information displayed, is also changed.
In your case (with an image), if this image is deployed with the rest of your site (e.g. images are placed in the /images directory so that <img src="/images/image.jpg"> is how you reference it in a page) then updating that image on a external source (such as headless WordPress) won’t update that image on your Netlify deploy.
If however you are referencing the image externally (e.g. <img src="https://some-other-site.com/images/image.jpg"> and you change that image, that new image will appear on your page. The same holds true if you have set up a proxy to another service meaning while you use <img src="/images/image.jpg"> the /images/` path actually points to an external service (demo on Jamstack Explorers Exploring Netlify Redirects mission).
Let me know if you have any further questions.
Thanks again for your response. I apologise if I am being thick which is usually the case 
So, my image is coming from an API. I have a headless WordPress setup where I created a custom endpoint I created in WordPress. Then in my Next.js project I would get it something like:
const response = await axis.get('https://mywebsite.com/wp-json/my-endpoint/v1/courses/14');
In that response I will have the title, the image, description etc. etc. and display the image using Next.js Image
<Image src={course.image} width={120} height={120} />
So, the image isn’t actually in the images directory in the Next.js deploy (or is it?) but the url is coming from the API. So, {course.image} is actually https://mywebsite.com/wp-content/uploads/my-image.jpg
Yet even though my image is external, from an API it doesn’t update on the frontend when changing it in the backend.
If the image source in your viewed page is an external location (ie. <img src="https://external-website/image.jpg">) and it isn’t showing the latest changes, then you may have some locale caching of the old image. Try another browser, private/incognito window to check.
If you provide you site, and the page with the problematic image, I can have a look for you.
Is it possible to PM you the urls? I have tried a few different browsers and I am always in the incognito window.
If you would prefer.
Yeah, please. I just don’t know how. The instructions say to click on your avatar and then the mail icon but I don’t see any mail icon?
Ah, right. Pity. Anyway, I’ll just have to put the link here then I guess.
So, this one is correct.
https://headless-test.netlify.app/courses
But then when you click on the title to go to the detail page you’ll see incorrect images. These are the old ones which haven’t updated like the listing page for some reason. They both have revalidate of 60 seconds.
The detail page is using getStaticPaths as well as getStaticProps but the image is still from the same API so I don’t know why it works on the listing page but not the detail pages
I downloaded it but not really sure what I am looking for. If I look at the individual pages generated basically from [id].js then I can see it is showing the old images in there. But again, not sure if this is what I am meant to be looking at?
That is the information available at build time, and as builds are immutable, that is how it shall remain forever more. If you trigger a new deploy of your site, the information available at this point will go into the build and remain unchanged forever more.