Content not updating when making changes in Sanity studio

[anthonyiu]

Hi Victor and all,

I've been following this tutorial and it's amazing to learn about Sanity headless CMS.
However, I encountered an issue about using the studio. Whenever I make changes in the studio, it does not reflect the changes on the website. I did set up the deployment hook to make sure that the site rebuilds automatically every time I save changes in the studio. Does anyone know why? Should I use getStaticProps() to fetch the data instead? Here is a deployment log from Vercel for your information. Thank you.

[Evavic44]

Hey, @anthonyiu. Are you publishing the document after you make a change? Because the deploy hooks are only triggered after the document has been published.

If you're publishing the document and still not getting any deployment hooks triggered, I'll suggest you take a closer look at the URL endpoint you copied from Vercel to make sure they match with the one on Sanity. Also check if the create, update, and delete boxes of the "Trigger on" input are checked.

[anthonyiu]

Hi Victor, the hook was triggered after I published through the sanity studio (as confirmed by Vercel deployment log, which stated that the update was made by Deploy Hook). However, it just didn't show the changes on any of the page, no matter I updated job, project or any data. Any clue?

[Evavic44]

I somehow missed the screenshot you added to your earlier response. Sorry about that. If the hooks are being triggered as expected, I'm not entirely sure what the issue might be, and it's harder to troubleshoot the problem without any code examples.

A few suggestions I can recommend are:

1. Try manually deploying your site on Vercel after you change and publish a document to see if deployments are working on your project.
2. Publish a document on your local server (localhost:3000/studio) and see if the changes are reflecting locally on your site.
3. Set useCDN to false.

[anthonyiu]

I somehow missed the screenshot you added to your earlier response. Sorry about that. If the hooks are being triggered as expected, I'm not entirely sure what the issue might be, and it's harder to troubleshoot the problem without any code examples.

A few suggestions I can recommend are:

1. Try manually deploying your site on Vercel after you change and publish a document to see if deployments are working on your project.
2. Publish a document on your local server (localhost:3000/studio) and see if the changes are reflecting locally on your site.
3. Set useCDN to false.

I somehow missed the screenshot you added to your earlier response. Sorry about that. If the hooks are being triggered as expected, I'm not entirely sure what the issue might be, and it's harder to troubleshoot the problem without any code examples.

A few suggestions I can recommend are:

1. Try manually deploying your site on Vercel after you change and publish a document to see if deployments are working on your project.
2. Publish a document on your local server (localhost:3000/studio) and see if the changes are reflecting locally on your site.
3. Set useCDN to false.

Hi Victor,

1. I tried to redeploy to Vercel. I made changes in studio and published. It didn't work.
2. Didn't work either on localhost. No changes shown.
3. Yes. It's set to false.

! found that the studio is "Not deployed" when I logged in via https://www.sanity.io/manage.

I googled it and followed the steps here at https://www.sanity.io/plugins/vercel-deploy to install the plugin to deploy on Vercel. It didn't work too. Maybe I will redo this project once again to see what's missing~ sigh...

[Evavic44]

It's optional to deploy the studio on Sanity, so not really the issue in case. As for the deployment issues, sorry I can't provide a solution. Maybe you'll have better luck this time.

[anthonyiu]

It's optional to deploy the studio on Sanity, so not really the issue in case. As for the deployment issues, sorry I can't provide a solution. Maybe you'll have better luck this time.

Hi Victor, finally I have resolved this after getting stuck for days. Simply add export const revalidate = 10; under each page.tsx (or any page fetching the data) to tell Next.js to refresh the pages and it just works magically. Cheers~

[benlinzel]

I believe the issue is due to Next's native fetch caching

It is indeed the fetch that is returning stale data with an outdated _rev

[benlinzel]

Theoretically, we should be able to bypass the fetch caching by placing this in the layout.tsx:

export const dynamic = 'force-dynamic'

But the behavior in that case is that the first page load contains stale data, and after a refresh it is updated. This even occurs with statically built pages.

Adding this to the layout.tsx works:

export const revalidate = 10;

[Evavic44]

Hi Victor, finally I have resolved this after getting stuck for days. Simply add export const revalidate = 10; under each page.tsx (or any page fetching the data) to tell Next.js to refresh the pages and it just works magically. Cheers~

While this will work, it may not be a really good solution as it greatly increases the request cost on Sanity. This was why I expressly choose the hooks way. If you want to keep using revalidation, I highly suggest you use on-demand revalidation instead as data revalidation happens only when the data changes (on demand), and not on a fixed time frame of say 10secs.

This is infact recommended by leerob. You can check out this issue to learn how it is setup and check out a live example usage here

[Evavic44]

Theoretically, we should be able to bypass the fetch caching by placing this in the layout.tsx:

export const dynamic = 'force-dynamic'

But the behavior in that case is that the first page load contains stale data, and after a refresh it is updated. This even occurs with statically built pages.

Adding this to the layout.tsx works:

export const revalidate = 10;

Why not just go full-on on-demand revalidation?

[benlinzel]

I agree that rebuilding the site with webhooks is the best way to accomplish this. However it appears there is a bug in the implementation somewhere. I'm seeing the same behavior that @anthonyiu mentioned in his first message.

After some more research, it looks like this is a known problem with next-sanity:

sanity-io/next-sanity#685

Sanity's slack community suggests using @sanity/client instead. I'm going to try that.

[Evavic44]

I agree that rebuilding the site with webhooks is the best way to accomplish this. However it appears there is a bug in the implementation somewhere. I'm seeing the same behavior that @anthonyiu mentioned in his first message.

After some more research, it looks like this is a known problem with next-sanity:

sanity-io/next-sanity#685

Sanity's slack community suggests using @sanity/client instead. I'm going to try that.

Cool. Let me know the outcome when you do.

[anthonyiu]

Hi all, I also did some research in Sanity and Vercel. I tried the revaldiateTag(). It works for me but ONLY when single tag is used and after I clicked "Purge Everything" in Data Cache in my project setting in Vercel. This issue has been raised to both Sanity and Vercel, Sanity said it seems to be an issue from Vercel. For more information, please see below.

sanity-io/next-sanity#639
vercel/next.js#55960

[Evavic44]

Hey all. So I wrote an article on how to set-up on-demand revalidation to get content updates both in production and development. Do give it a read if you like: https://victoreke.com/blog/sanity-webhooks-and-on-demand-revalidation-in-nextjs

Within the week, I'll integrate it into this site as well. Until then, happy coding!