ISR and Prismic

[loud galleon]

Hi there!
I use the Prismic Rest API to do my content queries.

First, I fetch the last content id (it is called Master Ref) and then the content associated to it.

I use the Incremental Static Generation of Next 13 with a Prismic webhook.
I have a status 200 which confirms me that the revalidate is done. In my route /api/revalidate, I take care to recover the ids and urls of the pages to revalidate. On this side it's ok.

I think the main problem comes from the first fetch and the master ref. It seems that Prismic also caches on its side and prevents Next from revalidating. So I never get the last master ref and my content never updates.

When I disable the caching with cache: no-store, it's working well and I get the master ref that allow me to get the fresh content.

Even if I try to export a constant as a revalidate from page export const revalidate = 10 or an option in a fetch function fetch(route, { next: { revalidate: 10 } }) it's not working.

1 - Maybe the problem is come from headers cache-control of Prismic ?
2 - Maybe anything else ?

Thanks for your help

[fresh warren]

Hi @loud galleon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

It seems that you're facing issues with caching and revalidation when using Prismic with Next.js Incremental Static Regeneration (ISR). Based on the information extracts provided, I can't confirm the exact cause of the issue. However, I can provide some suggestions that might help you troubleshoot the problem.

1. If you suspect that the issue is related to Prismic's cache-control headers, you can try to inspect the headers in the response from Prismic and see if they are causing any conflicts with Next.js caching behavior. You can also check Prismic's documentation or contact their support to get more information about their caching behavior.

2. As a temporary solution, you can use segment configuration (https://beta.nextjs.org/docs/data-fetching/fetching#data-fetching-without-fetch) to customize the cache behavior of the entire segment. For example, you can set the revalidate value for the entire page:

// app/page.tsx

import prisma from './lib/prisma';

export const revalidate = 3600; // revalidate every hour

async function getPosts() {
  const posts = await prisma.post.findMany();
  return posts;
}

export default async function Page() {
  const posts = await getPosts();
  // ...
}

Keep in mind that this is a temporary solution, and you might want to investigate further to find the root cause of the issue.

I hope these suggestions help you in troubleshooting the problem. If you need more information about Next.js ISR and caching, you can refer to the Next.js documentation (https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration) and Next.js Beta documentation (https://beta.nextjs.org/docs/data-fetching/revalidating).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@loud galleon kapa.ai is still learning and improving, please let us how it did by reacting below

[loud galleon]

The thing is, everything depends on the Prismic content. The revalidate seems to work (get a 200 status on Vercel) but when I fetch the last id of the fresh content, it is an old id. The fetch seems to be cache for a long time

?

@fresh warren The thing is, everything depends on the Prismic content. The revalidate seems to work (get a 200 status on Vercel) but when I fetch the last id of the fresh content, it is an old id. The fetch seems to be cache for a long time

[fresh warren]

Let me check the knowledge base for you again. One moment! :books:

---

Based on the information provided, it seems that the issue might be related to Prismic's caching behavior. Since the revalidation in Next.js appears to be working correctly, you might need to investigate Prismic's caching and see if it's causing the old content ID to be returned.

Unfortunately, the information extracts provided do not contain specific details about Prismic's caching behavior. I recommend checking Prismic's documentation or contacting their support to get more information about their caching and how it might be affecting your content updates.

In the meantime, you can try disabling Prismic's caching using cache: no-store as you mentioned earlier, which seems to work for you. This might not be the most optimal solution, but it can help you get the fresh content while you investigate the root cause of the issue.

For more information about Next.js ISR and caching, you can refer to the Next.js documentation (https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration) and Next.js Beta documentation (https://beta.nextjs.org/docs/data-fetching/revalidating).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@loud galleon kapa.ai is still learning and improving, please let us how it did by reacting below

[loud galleon]

I can disable Prismic's caching using cache: no-store but the page will be rendered at request time and not at build time ?

@fresh warren I can disable Prismic's caching using cache: no-store but the page will be rendered at request time and not at build time ?

[fresh warren]

Let me check the knowledge base for you again. One moment! :books:

---

Yes, when you disable caching using cache: no-store, it will cause the page to be rendered at request time instead of build time. This is because Next.js switches to dynamic rendering when a dynamic fetch() request with no caching is discovered.

Here's a summary of how dynamic functions and static data fetching (caching) affect the rendering behavior of a route:

Data Fetching	Dynamic Functions	Rendering
Cached	No	Static
Cached	Yes	Dynamic
Not Cached	No	Dynamic
Not Cached	Yes	Dynamic

As you can see, for a route to be statically rendered, the data requests must be cached and there should be no dynamic functions.

For more information about static and dynamic rendering in Next.js, you can refer to the Next.js Beta documentation (https://beta.nextjs.org/docs/rendering/static-and-dynamic-rendering).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@loud galleon kapa.ai is still learning and improving, please let us how it did by reacting below

[loud galleon]

so the performance will be lower ? It's a page with a bit of content and some images.

@fresh warren so the performance will be lower ? It's a page with a bit of content and some images.

[fresh warren]

Let me check the knowledge base for you again. One moment! :books:

@loud galleon That's a great question, but unfortunately I am only capable of responding to a maximum of three questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!

[loud galleon]

@fresh warren That's a great question, but unfortunately I am only capable of responding to a maximum of three questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!

[fresh warren]

Let me check the knowledge base for you again. One moment! :books: