I wrote my site in next.js, and added lots of symbols with reference and dynamic bindings, and followed by @TimG advice, we added the includeRef property as well, and it works fine in localhost.
I want my site to be server-side-rendered, so true to nextjs I have my getstaticpaths, getstaticprops calls, and in the end as I look at the post-build output I have my files.
The json shown below is a proprietary format that is represented by the Builder.io SDK.
It works fine on localhost, but in production environment something is wrong.
Here is an example of what I mean:
I deployed to Vercel and Netlify as well, same issue on both, so I guess it is somehow related to Builder as well.
Localhost demo WITHOUT enabling js, everything is okey:
Let’s check the production:
Example id: builder-8a48d18ca8934107ac4f928c828fb847:
And without the JS:
You can see that the components which are not symbols are working properly, these are custom components or basic Builder widgets. But the referenced dynamic symbols are not there.
As you can see the layout of the elements are visible in the DOM, the only thing missing from this is to link the ids in the SSR file and display them on the page, because as you can see in the attached file, it contains all the necessary data.
Here is the output of the html and json file.
So on localhost: npm run build & npm run start, so the production version of localhost everything is working properly, all the ids will be connected with the components in the dom and rendered.
I will create a minimal demo example with this use-case and deploy it, so we can investigate there why are the symbols not loading up.
I think it is not related with my code, and not with the deployed version (neither vercel nor netlify), i think it is Builder.io related. If you could show me a deployed SSR Builder page with symbol than I would like to see and compare it with our solution.