~ 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’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?
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?
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.
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.
