How to update frontend when content in Strapi is changed?

System Information
  • Strapi Version: v4.1.7
  • Operating System: Ubuntu 20.04
  • Database: MySQL
  • Node Version: 16.15.0
  • NPM Version: 8.5.5
  • Yarn Version: 1.22.11

~ I am not the one that developed this website, I’m here only to make changes.
I have a content-type called page and I have to make edits on one specific page. There isn’t much to change, switch three columns with two columns. I manage to do all of that in my Strapi Admin, but I see no changes on my Next JS app. What do I need to do to change it? Is triggering webhook necessary?

I’m no Next expert, but doesn’t it require a build then deploy?

I’ve tried using npm run build with my local next app but still no changes. If I move around existing components I can see the changes but when I add a new component the changes aren’t reflected on the frontend part. Is there anything else that I need to do on strapi side?

I do get my new component in a response, and I can see it;s element but it keep being empty

This feels like a NextJs thing. It’s not pulling content on build for some reason. Or you’re seeing cached pages? I guess you’ve done Ctrl-F5 to refresh the page in browser right?

Yes, I have, but it still doesn’t show up

Maybe you can try using socket.io.
Join in the room and get notified when message emitted in the room.

Hi Moi, I have the same issue with Strapi and the changes on NextJS. Any comments about how to fix that?? I change the endpoint to this ‘…/api/books?populate=*’ but I cannot see any changes.

Cheers!

I found out that if I click on the button “Disable cache” on the tab “Network” once I open the inspect bar, data will be automatically refreshed from Strapi. I hope it works for your as well. I am using Chrome

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.

pm2 stop
pm2 delete
npm run build --clean
pm2 start ecosystem.config.js

above works for me