Symbol input incorrectly rendered on the server

Builder content link

Builder public api key

Detailed steps to reproduce the bug
On our homepage (see content link above), we use 2 different symbols to alternate between post layouts (single large post or 3 smaller posts)
Each of those symbols connects to an API to retrieve the blog posts, and the symbols takes as input a parameter offset to specify at which post to start.

The offset is taken from the state object in the symbol JS script

//URL to retrieve posts
    let url = ''
//State object used to retrieve the offset for this specific instance of the symbol
    url = url.replace('__OFFSET__', state.offset)

When this symbol is rendered on the server (see link below), the input of the symbol is not correctly taken into account, and the state.offset seems to be undefined.

The effect of that is that the posts are repeating themselves in the response.

When client side rendered, the blog posts don’t repeat themselves, see Drag and drop Visual CMS or

This is quite annoying because it means that

  • the SSR version for SEO doesn’t contain all the correct information
  • Users can first see the SSR version (with repeated posts) before seeing the client side rendered version with the correct posts.

Thanks in advance for the help,

Code stack you are integrating Builder with

Hi @vperrin , you can try using our HTML API to pre-render the content server-side. Check it out in the link below!

Hi @ancheetah,
Thanks for getting back to me.
I am already trying to use the html api to pre-render server side, however the results on the page are different than the client site rendered version.

Let’s take as an example the second triplet of posts. This symbol has an input field offset equal to 4. The client side rendered version (see picture below) shows correctly the post “best trends for summer 22 and how to wear them first”

If we now look at the server-side rendered version, you can see that that post doesn’t exist, and that every triplet on the page starts with the post “How to instantly upgrade your Summer wardrobe”

To me it seems that the reason for that is that when rendered server-side, the symbol input fields are undefined in the state object.

Does that make sense?

Hi Vincent,

My apologies, I didn’t notice the first HTML API query you linked above. Thanks for the clarification, that does make sense. I can take this question back to the team and get back to you when I have an update.

Hi @ancheetah,

I had to make some changes to work around this issue.

I have created the following page for you to better visualise the issue.

Both symbols run the same script accessing input parameters from the state object, for example state.offset. The difference is where they are run, the first one is forced to render on the server (using Builder.isServer) and the second one is forced to render on the client using (Builder.isBrowser).

The one rendered on the client shows the correct posts, while the one rendered on the server doesn’t, no matter what the input, it will always show the same posts.

Hope this makes it clearer.

Hi Vincent, thanks for that clarification. This is a known bug that we are working on. On my side, I can reproduce this independently as well and see that symbol content is returned correctly with the HTML API except for the parts where I bind to dynamic data fetched from an external API, similar to your case. I’ll let you know when I have any updates!

Hi @ancheetah ,

Thanks for confirming this is a know bug and looking forward for it to be fixed.


1 Like