How to update frontend when content in Strapi is changed?

Questions and Answers
10

Most likely your API fetches are being cached in NextJS.

If using SSG, you can use no-cache if you never want to cache. You can use reinvalidate, using ISR, to pull back the latest updates after x seconds. Note: If a user navigates to a page, and the reinvalidate kicks in, the current user will not see the new updates unless they refresh the page. Other users who navigate to the page will see the new updates.

export default async function Page() {
  // This request should be cached until manually invalidated.
  // Similar to `getStaticProps`.
  // `force-cache` is the default and can be omitted.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })
 
  // This request should be refetched on every request.
  // Similar to `getServerSideProps`.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })
 
  // This request should be cached with a lifetime of 10 seconds.
  // Similar to `getStaticProps` with the `revalidate` option.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  })
 
  return <div>...</div>
}

Another option is to switch to SSR using getServerSideProps. Then the page will always be generated on each call. It will be slower but you will see the latest content.

1 Like