#strapi ssg

1 messages · Page 1 of 1 (latest)

frank wagon
#

I am using Next.js 15 for my website and Strapi CMS to manage its content. I have set up a webhook in Strapi that triggers and calls a custom API in my Next.js app whenever content is updated. This mechanism is intended to ensure that the updated content is reflected on the site.
However, I’m facing an issue related to SSG (Static Site Generation). After deploying a new build, most of the content displays correctly, but on a few specific pages, outdated content is shown — content that seems to be from an earlier version of the CMS. These pages do not reflect the latest changes made in Strapi, even though the CMS holds the correct, updated data.
To work around this, I have to manually open the problematic page in Strapi, make a small edit (just enough to enable the save button), and save the content again. After doing this and refreshing the page on the website, the updated content appears as expected.
I noticed that this issue occurs only when I build the app without deleting the previous .next build folder. Recently, I tried deleting the .next folder before generating a new build, and after that, all the pages — including the previously problematic ones — started displaying the correct, updated content.
I’d like to understand:

Why is this happening?

Is there a caching issue related to the build or ISR?

What is the proper way to ensure all content is correctly updated in the build, especially for SSG pages?

proper scaffoldBOT
#

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

#

Based on the knowledge sources, I can see you're experiencing a caching issue with Next.js SSG and Strapi CMS. This is a known issue that several users have encountered.

Why This Is Happening

Your issue appears to be related to how Next.js handles caching during static site generation. When you build your app without clearing the previous .next folder, Next.js may reuse cached data from previous builds, especially for pages that were pre-rendered during the build time. This can lead to stale content being displayed even after content updates in your CMS.

This is consistent with issues reported where "on demand revalidation doesn't work for pages that are pre-rendered during build time" on Vercel deployments. Users have observed that pages generated via generateStaticParams() sometimes fail to update properly when using revalidation.

Caching Issues with ISR and Builds

Yes, there is definitely a caching issue. Several related problems have been documented:

  1. Build-time cache persistence: Next.js caches data fetched during build time, and this cache might not be properly invalidated between builds if the .next folder is preserved.

  2. Inconsistent fetch cache behavior: There's a documented issue where "fetch cache seeded at build time during SSG is not reused at runtime" on Vercel, which could explain why your webhook-triggered updates aren't consistently reflected.

  3. Stale data after revalidation: Users have reported that "on demand ISR - caches old data / renders stale data for initial request" after revalidation, which aligns with your experience.

Proper Solutions

Based on the knowledge sources, here are recommended approaches:

#
  1. Clear the build cache: As you've discovered, deleting the .next folder before building ensures a fresh cache. This can be automated in your build script:

    rm -rf .next && next build
    
  2. Use proper tag-based revalidation: In your API route that handles the Strapi webhook, ensure you're using the correct revalidation approach:

    import { revalidateTag } from "next/cache";
    
    export async function POST(request: Request) {
      const body = await request.json();
      const url = body.entry.url; // The path to revalidate
      
      revalidateTag(url);
      
      return Response.json({ message: `Cache invalidated for ${url}` });
    }
    
  3. Avoid forward slashes in tags: One user noted: "I moved my tag from something containing a forward slash to just be text and it appears to work" in the issue thread.

  4. Set dynamic parameters: Add these exports to your dynamic pages:

    export const dynamic = "auto",
      dynamicParams = true;
    
  5. Deploy with buildCache=false: If you're using Vercel, consider using the buildCache=false parameter when triggering deployments to ensure a fresh build.

The Next.js team has been working on fixes for these issues, with some solutions already rolled out. If you're still experiencing problems after implementing these solutions, consider upgrading to the latest version of Next.js, as some of these caching issues have been addressed in recent updates.

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