Currently, I use builder.io to build a simple landing page. I’ve integrated with Nextjs and I can preview it on my machine. But the issue is when I update content (remove or insert) in Visual Editor, it only shows on the layers view but not the preview window. Then I have to reload a few times to make it show on the preview window. Did I do something wrong, because it keeps happening?
Welcome to the Forum community, @phat.huynh !
Could you confirm if that’s the preview window you are referring?
I would like to understand more about the issue you are facing, could you share a recording if the issue? Also, if you could let us know the Tech stack you are using.
Yes, you’re right. The element is displayed on the layers view but not the preview window. I used Nextjs to integrate with Builder.io. I do everything following the integration guide, nothing special.
Could you share a short video recording with browser console open? That will help us better examine this issue if there were any errors.
Thank you for reaching out to us.
Here is the recording, hope this helps.
Thank you for sharing the recording. We couldn’t capture the entire error, but it appears to be related to a hydration error.
Could you please share your package.json file with us? Additionally, it would be helpful to know if you started encountering this issue recently and whether it was working correctly before.
We haven’t had any luck replicating the issue. Is the issue still persistent for you?
If yes, could you share your BuilderIO integration code snippet and a content URL that I can to test.
I’ve figured it out. It was my fault, on the BuilderContent component I set the wrong model name. After changing to the correct model name, the preview window works correctly. Just asking, after pressing the publish button the content on my web has not been updated immediately, it is delayed 2-3 minutes. Does it relate to cache or something like that?
Glad to hear you were able to resolve the issue. Yes, you are right about cache.
When users publish content, we update the Firestore content with their latest changes. Afterward, any API calls to retrieve that content go through our caching system. This means the first call typically returns cached data, while the subsequent call provides fresh data as we simultaneously update the cache with the latest Firestore contents.