Builder content link
Builder public api key
dc5c96804c6c4a068e9558f30660aaee
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 = 'https://www.sachini.co.uk/api/content?pageType=blog-page&cacheBust=true&hitsPerPage=1&offset=__OFFSET__'
//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.
https://cdn.builder.io/api/v1/html/product-landing-page?apiKey=dc5c96804c6c4a068e9558f30660aaee&userAttributes.urlPath=/
When client side rendered, the blog posts don’t repeat themselves, see Builder.io: Drag and drop Visual CMS or https://staging.sachini.co.uk
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,
Vincent
Code stack you are integrating Builder with
Nextjs
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”
https://cdn.builder.io/api/v1/html/product-landing-page?apiKey=dc5c96804c6c4a068e9558f30660aaee&userAttributes.urlPath=/
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?
Thanks,
Vincent
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 Builder.io 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.
Thanks,
Vincent
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.
Thanks,
Vincent
1 Like
