Help revalidate API Call in Next.js(App router) and Cloudflare.

[fickle flicker]

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

---

To address your issue with revalidating API calls in a Next.js project deployed on Cloudflare using @cloudflare/next-on-pages, you need to ensure that your data fetching and revalidation strategies are correctly implemented. Here are some steps and code examples to help you achieve this:

1. Using fetch with next.revalidate

You can use the next.revalidate option in your fetch requests to set the revalidation period. This will ensure that the data is revalidated after a specified amount of time.

// Revalidate at most after 1 hour
fetch('<https://your-api-endpoint',> { next: { revalidate: 3600 } })

2. Revalidating Data in Server Actions

If you need to revalidate data based on specific actions (e.g., after creating a post), you can use the revalidatePath or revalidateTag functions provided by Next.js.

Example using revalidatePath:

'use server'

import { revalidatePath } from 'next/cache'

export async function createPost() {
  try {
    // Your logic to create a post
  } catch (error) {
    // Handle error
  }

  revalidatePath('/posts')
}

Example using revalidateTag:

'use server'

import { revalidateTag } from 'next/cache'

export async function createPost() {
  try {
    // Your logic to create a post
  } catch (error) {
    // Handle error
  }

  revalidateTag('posts')
}

3. Incremental Static Regeneration (ISR)

If you are using getStaticProps, you can set the revalidate property to specify the revalidation period.

export async function getStaticProps() {
  const res = await fetch('<https://your-api-endpoint'>)
  const data = await res.json()

  return {
    props: {
      data,
    },
    revalidate: 10, // Revalidate at most once every 10 seconds
  }
}

4. Cloudflare Configuration

Ensure that your Cloudflare configuration supports SSR and that the caching settings do not interfere with the revalidation logic. You might need to adjust Cloudflare's caching settings to respect the cache headers sent by your Next.js application.

References

• Revalidating Data (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data)
• fetch options.next.revalidate (https://nextjs.org/docs/app/building-your-application/caching#fetch-optionsnextrevalidate)
• Server Actions and Mutations (https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#revalidating-data)
• Incremental Static Regeneration (https://nextjs.org/docs/pages/api-reference/functions/get-static-props#revalidate)

By following these steps and ensuring your configuration is correct, you should be able to achieve the desired revalidation behavior for your API calls in a Next.js project deployed on Cloudflare.

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

@prisma widget kapa.ai is still learning and improving, please let us know how it did by reacting below