Data is cached and not updating after publish in live url

Hello! I hope you are doing well
I have an issue facing from a couple of days but failed to resolve it. The issue is that if I updating any content from the builder studio it is updating when I see by clicking the “view current draft” but not updating after clicking the “live page” I 100% sure the issue is with the cache.

Please note that the updated content is showing after 2-3 more changes or after very long time I am attaching code base screenshots for your preference.
Thank you

   const [heroContent, workflowContent] = await Promise.all([
     builder
       .get("hero", {
         userAttributes: { urlPath },
         cache: false,
         static: true,
         options: { enrich: true },
         cachebust: true,
       })
       .toPromise(),
     builder
       .get("workflow", {
         userAttributes: { urlPath },
         cache: false,
         static: true,
         options: { enrich: true },
         cachebust: true,
       })
       .toPromise(),
   ]);

I have read soo many articles saying “you can add cachebust cacheTime enrich and what not” but after implementing all the scenarios I am still getting this issue .

I simple want if I do changes from builder studio clicks on publish go to the live page it update my data. (A simple refresh once is acceptable).

Looking forward for your response

What I am using:
Nextjs 14 app router

Hi Hammad​,

Thank you for contacting Builder.io Support! I look forward to helping you with your request.

While I start looking into this, feel free to share any additional information you think might be relevant. Your input is important to helping ensure that I understand and respond to your concerns effectively.

Thanks,

Hi Hammad​,

Are you using a public URL or localhost:3000 to preview the page?

If you use a public URL, do you have any CDN or cache in your hosting?

Thank you,

Thank you so much for the reply,
I am using localhost:3000 for the preview yet I don’t have any cache in the live URL will it work fine on the live?

Hello Hammad​,

Could you share your integration code?

Thank you,

Of course! Here is my integration code:

app/[...page]/page.tsx

const builderModelName = "homepage";

  const content = await builder
    .get(builderModelName, {
      userAttributes: {
        urlPath: "/" + (props?.params?.page?.join("/") || ""),
      },
    })

    .toPromise();

  return (
    <RenderBuilderContent
      content={content}
      model={builderModelName}
      customComponents={customComponents}
    />
  );

components/builder.tsx

"use client";

import { ComponentProps } from "react";
import { builder } from "@builder.io/sdk";
import { BuilderComponent, useIsPreviewing } from "@builder.io/react";

builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);

type BuilderPageProps = ComponentProps<typeof BuilderComponent>;

export function RenderBuilderContent({
  content,
  model,
  customComponents,
}: BuilderPageProps) {
  const isPreviewing = useIsPreviewing();

  if (content || isPreviewing) {
    return (
      <BuilderComponent
        content={content}
        model={model}
        customComponents={customComponents}
      />
    );
  }

  return <div>`No content available for the model` "{model}".</div>;
}

I am rendering builder component globally and here is my Hero Section:

export const HeroSection = ({
  MainHeading,
  SubHeading,
  Bullet1,
  Bullet2,
  Bullet3,
  Ordernowbtn,
  Chatonwhatsappbtn,
  Formtopbar,
  Formheading,
  Inputtwo,
  Inputthree,
  Formbutton,
}: Props) => {
 
  return (
    <div
      ref={ref}
      className="m-h-[500px] border-b-2 border-indigo-200 -z-10 h-full w-full bg-gradient-to-t from-sky-200 via-purple-200 to-zinc-100 dark:-z-10 dark:m-h-[500px] dark:w-full dark:[background:radial-gradient(125%_125%_at_50%_10%,#000_40%,#63e_100%)]"
    >
      <div className="grid lg:grid-cols-2 grid-cols-1 mx-auto max-w-screen-xl py-10 ">
        <div className="py-20 px-5 ">
          <h1 className=" text-center py-2 lg:text-left dark:text-zinc-100 text-zinc-900 text-lg sm:text-4xl font-extrabold ">
            {MainHeading}
          </h1>

I am rendering more data but here is I am giving MainHeading for just an example

Please ask me if you need any other thing for your preference
Thank you :slight_smile:

Hello @hammad01,

We suspect that the issue may be related to server-side caching. We recommend checking the cache settings on your deployment server to see if this is contributing to the problem.

Additionally, the issue could also stem from Next.js caching. The following resources may help you address this:

Please let us know if the issue persists after reviewing these settings.

Thanks,