Next.js Website Not Updating Content After Deployment – Old Content Still Served

[Aun Digital]

One of our client’s, which is a leading web design agency  have their website built with React.js as the frontend and Next.js as the backend. The issue we’re facing is that some pages are not updating with the latest content changes, even after deployment. Sometimes, old content is still served, and we need to manually clear the cache for updates to appear. What could be causing this, and how can we ensure automatic updates without manual intervention?

[Deepika Arumugasamy]

Hi Aun Digital,


Thank you for reaching out.

The issue you’re facing, where old content is still served even after deployment, is likely caused by cached data. In Next.js, the .next cache folder stores build data and can sometimes cause outdated content to persist.

 

Suggested Solutions:

 

Clear Cache Before Deployment:
You can add a cache clean command before the deployment process to ensure no old content is served. You can add this as a step in your deployment pipeline or script.

 

rimraf .next

 

Use Incremental Static Regeneration (ISR):
If you are using static generation (getStaticProps) and want updates without a complete rebuild, ensure that ISR is correctly configured. This allows pages to update automatically in the background.

 

export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 60, // Revalidates every 60 seconds
  };
}

 

 

Disable Cache in Browser or CDN:
Ensure there are no browser or CDN-level caching issues by adding appropriate cache-control headers.

 

res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
 

 

Feel free to reach out for further assistance.

Regards,

Deepika