Revalidation of Shopify pages?

[zenzen-sol]

The integration guide shows an example using Shopify's "pages" feature to manage content for dynamic pages.

However—unlike collections and products—Shopify does not provide a webhook event for on-demand revalidation when page content updates are saved. We've noticed that pages content is not being updated, even if we adjust time-based revalidation down to, e.g., export const revalidate = 300.

Is there a recommended approach to force revalidation of pages and other non-product/collection content?

[hunterrmartinn]

@zenzen-sol I also ran into this issue the other day as well - hoping someone else can chime into this discussion to help solve this. This is definitely not the best solution, but this was the workaround I found for now.

1. Added pages: 'pages' to TAGS in lib/constants.ts.
2. In lib/shopify/index.ts added the pages tag to getPage.
3. Created a check in revalidate following the same process as the collection and products cases. I only used the products/update webhook for the page update.
4. Make and save changes to Shopify page and then go add a space to a product description or some changes on a product and save. This will call the revalidation for the page.

Again, this is not the best, but it is a temp work around dancing between saving pages and updating products.

[hunterrmartinn]

Update and simpler solution based on #1009:
In lib/shopify/index.ts change cache from 'force-cache' to 'no-cache' and in app/[page]/page.tsx set revalidation to 0.

This worked for me after saving a change on a Shopify page, waiting a couple seconds, and then refreshing the served page.

@zenzen-sol I also ran into this issue the other day as well - hoping someone else can chime into this discussion to help solve this. This is definitely not the best solution, but this was the workaround I found for now.

1. Added pages: 'pages' to TAGS in lib/constants.ts.
2. In lib/shopify/index.ts added the pages tag to getPage.
3. Created a check in revalidate following the same process as the collection and products cases. I only used the products/update webhook for the page update.
4. Make and save changes to Shopify page and then go add a space to a product description or some changes on a product and save. This will call the revalidation for the page.

Again, this is not the best, but it is a temp work around dancing between saving pages and updating products.

[zenzen-sol]

Update and simpler solution based on #1009: In lib/shopify/index.ts change cache from 'force-cache' to 'no-cache'

Won't this break the cache for all fetches? I prefer to keep the cache for products & collections, since I can manage via webhooks.

Ideally, I would like to set a short time-based revalidation period on the route—e.g., via export const revalidate = 300—but that doesn't seem to ever trigger revalidation.

[hunterrmartinn]

Update and simpler solution based on #1009: In lib/shopify/index.ts change cache from 'force-cache' to 'no-cache'

Won't this break the cache for all fetches? I prefer to keep the cache for products & collections, since I can manage via webhooks.

Ideally, I would like to set a short time-based revalidation period on the route—e.g., via export const revalidate = 300—but that doesn't seem to ever trigger revalidation.

That's true, it would break the cache and fetch new data each call.

This might be related to more general App Router issue? Here's just one of the threads I found related to this: vercel/next.js#49417

[leerob]

Addressing this here: #1236

• Using revalidate does not pair with the edge runtime, which is why this wasn't working
• We wanted to use the edge runtime to make the entire page render fast, even though the data was cached static
• However, the only reason dynamic rendering was needed in the first place, was due to reading cookies for the cart
• With Partial Prerendering, we'll be able to serve a static shell + load dynamic content, like these pages