Content updates not showing in production

Bugs
1

Hello,

We are currently trying to integrate a blog into our marketing website mammacare.org based on this article. We have been having continuous issues with newly published blog posts not showing up on the blog index page or deleted posts still being available days after they were deleted. We also have an issue with blog posts being available on the blog index page but showing no content when we view the actual post. This issue seems to only exist in production as running the site on localhost shows the correct state of the current content. We are running Next.js 14 with the Pages directory deployed on Vercel.

It also seems that this is not an issue with page models.

Link to live article from the screenshots below: https://www.mammacare.org/blog/revolutionizing-breast-cancer-detection-the-value-of-ai-training

Builder content link
https://builder.io/content/58171c30db04462793e683f4bbc76422

Screenshots or video link
Localhost

image
image1920×1043 140 KB

Production

image
image2560×1390 315 KB

Code stack you are integrating Builder with
Next.js 14 with Pages directory

Reproducible code example
blog.tsx

export async function getStaticProps() {
  const blogPosts = await builder.getAll("blog-post-section", {
    options: {
      noTargeting: true,
    },
    sort: {
      "data.title": 1,
    },
    cachebust: true,
  });

  const tags = blogPosts.reduce((allTags: any, post: any) => {
    post.data.tags.forEach((tag: any) => {
      if (allTags.indexOf(tag) === -1) allTags.push(tag);
    });
    return allTags;
  }, []);

  const header = await builder.get("symbol", {
      query: {
        id: "ddd0490e595945cba3a775b741918a6c",
      },
    });

  const footer = await builder.get("symbol", {
    query: {
      id: "d0d0eeedd9f5498ab74c7b594afa5650",
    },
  });

  return {
    props: {
      posts: blogPosts || null,
      tags: tags || null,
      header: header || null,
      footer: footer || null,
    },
  };
}

[…slug.tsx]

export async function getStaticPaths() {
  const posts = await builder.getAll("blog-post-section", {
    fields: "data.slug",
  });
  return {
    paths: posts.map(({ data }: any) => ({
      params: {
        slug: data.slug?.split("/") || "",
      },
    })),
    fallback: "blocking",
  };
}

export async function getStaticProps({ params }) {
  const post = await builder
    .get("blog-post-section", {
      options: {
        enrich: true,
      },
      query: {
        "data.slug": params.slug.join("/"),
      },
    })
    .toPromise();

  const header = await builder.get("symbol", {
    query: {
      id: "ddd0490e595945cba3a775b741918a6c",
    },
  });

  const footer = await builder.get("symbol", {
      query: {
        id: "d0d0eeedd9f5498ab74c7b594afa5650",
      },
    });

  return {
    props: {
      post: post || null,
    },
  };
}
2

In case anyone stumbles across this in the future, I wanted to update this and say that it appears we actually solved this problem. It turns out we were over the limit for “Fast Origin Transfers” on our Vercel account, so once we upgraded from “Hobby” to “Pro” the issue was resolved almost instantly.