Builder Cacheing Issues?

[spm922]

Is anyone experiencing odd behavior with Builder over the last 24-48 hours? We have noticed a few things:

1. Connected data being cached and returned with the wrong page. We have like 30 pages that have connected data and we noticed that when using the target query to fetch data our nextjs app would route to a new page and request for that pages data based on the URL but the builder API would return the response from the previous page request.

2. Builder objects removed in the UI but persisting on the editor page in a readonly mode. Example Builder.io: Drag & Drop Headless CMS

3. Builder appending multiple image formats to the CDN URL making images not render.

[manish-sharma]

Hello @spm922,

To assist you better, could you please provide a few examples and screenshots to help us understand the issue you’re facing more clearly?

Additionally, if you could share the code for integrating the builder page, it would greatly aid us in providing you with a more precise and effective solution. Thank you!

[josh]

This may be related. We’re getting reports from customers that they’re seeing old versions of pages. These old pages are still published but have new versions targeted at the same URL. I’m unable to replicate the issue myself, but have timestamped screenshots from customers showing the old page. It would appear to be a caching issue, but the page they’re receiving should have been overridden many days ago.

[manish-sharma]

Hello @josh,

You can try using cacheSeconds and cachebust option with your builder.get call and see if that helps

import { builder } from "@builder.io/react";

// replace model with your model name
const entry = await builder.get('my-model-name', {
  cacheSeconds: 10,
  cachebust: true,
})

How long does the cache take to clear after publishing content?

When publishing your pages, the changes might not be immediate due to caching. Caching helps us ensure the best possible performance while keeping content reasonably fresh. We use a technique called stale-while-revalidating caching which updates the data based on how frequently data is requested. For example, if you update the content, but no one visits your site, your content may not update right away. The next time a user visits the site, they’ll see the cached version, while the latest versio…

[spm922]

Here’s an example

This the URL that builder is applying where format=webp is included twice

This is the content Builder.io: Drag & Drop Headless CMS.

If we switch to a jpg or png version of the image it works.

---

I can try to repro the cacheing issue I mentioned but will take me sometime to stage this in another builder space.

[manish-sharma]

Hello @spm922,

Thank you for bringing this to our attention.

It appears that the problem you’re facing may be linked to the uploading of webp images, which could potentially be causing compatibility issues within our platform. We have successfully replicated the issue on our end, and our dedicated team is actively working to investigate and find potential solutions.

At this time, while we are committed to resolving the issue as quickly as possible, we don’t have a specific timeline for when the fix will be deployed. Rest assured, we will keep you updated on our progress.

Working with Images - Builder.io

When you use Builder’s Image Block for your images, Builder serves the correct optimized format for every web browser. Builder performs these optimizations so you don’t have to:

• The Image Block ensures you load the smallest possible image.
• Builder analyzes your image as it relates to the layout of your page and determines the exact sizing of your image for all device sizes, automatically generating the optimal size for each screen.
• Builder uses lazy loading, which loads images only when your users need them. This reduces how much users have to download.
• Builder uses responsive page layout analysis to flag which images are below the page fold for each device so they can be lazy loaded.
• Builder converts your image to the webp format.

If you’re a developer and are looking for more control over the image that is served by Builder, read the Image API documentation.

[spm922]

Thank you! Are we able to specify the format from the default image block? This particular page is managed in the builder UI and not coded by us.

[manish-sharma]

Hello @spm922,

You can append any accepted image format to the image CDN URL by pressing CMD + E or CTRL +E , however, this will not work if you are uploading or using webp image.

[spm922]

Thank you. This is good to know.

I’m also having issues with this page Builder.io: Drag & Drop Headless CMS. I’m unable to edit it. I’m trying to edit the custom component, service detail, but none of the text inputs are changing on the page. Could you take a look?

[manish-sharma]

Hello @spm922,

The issue seems to be with the path /tech-support/printer-setup , do you possibly have any redirect setup for this path or are you handling urlPath differently for tech-support?

    .get("page", {
      userAttributes: {
        urlPath: "/" + ((params?.page as string[])?.join("/") || ""),
      },

[spm922]

No, there isn’t a redirect. This is our static props code for this page

export async function getStaticProps({
  params,
}: GetStaticPropsContext<{ page: string[] }>) {
  const page =
    (await builder
      .get("page", {
        userAttributes: {
          urlPath: "/" + (params?.page?.join("/") || ""),
        },
      })
      .toPromise()) || null;

  return {
    props: {
      page,
    },
    revalidate: 5,
    notFound: !page,
  };
}

[manish-sharma]

Hello @spm922,

We’ve discovered a potential solution for the issue you were facing. By enabling the “Proxy Previews” option located in Settings → Advanced Settings → Advanced, it appears that the custom component “Service Details” input fields are now editable.

Could you please verify this and let us know if you encounter any additional questions or concerns?

[spm922]

Thanks this helps!

I was able to reproduce the connected data issue in an other space. Here’s a recording of the issue we are seeing Loom | Free Screen & Video Recording Software | Loom.

Content in the recording

Builder.io: Drag & Drop Headless CMS

Builder.io: Drag & Drop Headless CMS

[manish-sharma]

Hello @spm922,

To address the caching issue, consider including the “cachebust: true” option in your builder’s get call. This will help ensure that your application fetches the most up-to-date content and may resolve any caching-related problems.

  const page = await builder
    .get("page", {
      userAttributes: {
        urlPath: "/" + ((params?.page as string[])?.join("/") || ""),
      },
      cachebust: true, 
    })
    .toPromise();

[OmPrakash]

I noticed symbols on both pages, but there isn’t a symbol model. I suggest removing these symbols from both pages, publish the changes, and recheck. If the issue persists, consider adding cacheburst: true as recommended by @manish-sharma.

Please let us know if this resolves the issue.

[spm922]

Here’s an updated video https://www.loom.com/share/8f88c76ab1c34ac4bb8f252a087d19ba?sid=01137232-4c90-4e97-8ec1-3c185551f5a4.

I added cacheburst: true and created a new page with no symbols or custom elements. I was able to reproduce the issue.

NOTE: This only happens when navigating internally using next/link. If I refresh the page I get the expected content.

[spm922]

Just wanted to follow up here. Any thoughts?

[OmPrakash]

It is quite unusual, it seems to be working fine on your main site though, right?
Could you share the console errors duration the navigation, if any?

[spm922]

No, it’s not working on our main site. We are trying to migrate our service pages to use a connected data modal as the source instead of the the current hard coded method, but this issue is blocking that. I’m able to reproduce this in multiple builder spaces. Do have you any suggestions on how to fix this?

[spm922]

Just following up here. Any thoughts?