# Symbol input incorrectly rendered on the server

**URL:** <https://forum.builder.io/t/symbol-input-incorrectly-rendered-on-the-server/2474>\
**Category:** Bugs\
**Created:** [August 11, 2022, 9:07am UTC](https://forum.builder.io/t/symbol-input-incorrectly-rendered-on-the-server/2474 "2022-08-11T09:07:13Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![vperrin](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/vperrin/32/196_2.png) [@vperrin](https://forum.builder.io/u/vperrin)\
**Post date:** [August 11, 2022, 9:07am UTC](https://forum.builder.io/t/symbol-input-incorrectly-rendered-on-the-server/2474/1 "2022-08-11T09:07:13Z")

</div>

**Builder content link**

> **[Builder.io: Drag and drop Visual CMS](https://builder.io/content/d0f1100f8b2b435a81a38405c3220389)**
>
> Build and optimize digital experiences for any tech stack, visually.

**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

```auto
//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=/](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](https://builder.io/content/d0f1100f8b2b435a81a38405c3220389) or [https://staging.sachini.co.uk](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

---

<div class="post-metadata">

**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\
**Post date:** [August 15, 2022, 8:34pm UTC](https://forum.builder.io/t/symbol-input-incorrectly-rendered-on-the-server/2474/2 "2022-08-15T20:34:33Z")

</div>

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

> **[Builder.io HTML API - Builder.io](https://www.builder.io/c/docs/html-api)**
>
> Render pages server side with our HTML API

---

<div class="post-metadata">

**Author:** ![vperrin](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/vperrin/32/196_2.png) [@vperrin](https://forum.builder.io/u/vperrin)\
**Post date:** [August 15, 2022, 9:25pm UTC](https://forum.builder.io/t/symbol-input-incorrectly-rendered-on-the-server/2474/3 "2022-08-15T21:25:38Z")

</div>

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”

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/b615b3d7e99a24b6a9c686346162bb412417df66.jpeg)

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=/](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

---

<div class="post-metadata">

**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\
**Post date:** [August 15, 2022, 9:53pm UTC](https://forum.builder.io/t/symbol-input-incorrectly-rendered-on-the-server/2474/4 "2022-08-15T21:53:33Z")

</div>

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](http://Builder.io) team and get back to you when I have an update.

---

<div class="post-metadata">

**Author:** ![vperrin](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/vperrin/32/196_2.png) [@vperrin](https://forum.builder.io/u/vperrin)\
**Post date:** [August 16, 2022, 8:38pm UTC](https://forum.builder.io/t/symbol-input-incorrectly-rendered-on-the-server/2474/5 "2022-08-16T20:38:52Z")

</div>

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.

> **[Builder.io: Drag and drop Visual CMS](https://builder.io/content/cfcc544c42b6442c82f2238238c65526/edit?activeDesignerTab=0&selectedBlock=builder-24acbd2285d14ce196cb95b53b83c64d)**
>
> Build and optimize digital experiences for any tech stack, visually.

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

---

<div class="post-metadata">

**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\
**Post date:** [August 17, 2022, 4:40pm UTC](https://forum.builder.io/t/symbol-input-incorrectly-rendered-on-the-server/2474/6 "2022-08-17T16:40:35Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![vperrin](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/vperrin/32/196_2.png) [@vperrin](https://forum.builder.io/u/vperrin)\
**Post date:** [August 18, 2022, 8:37am UTC](https://forum.builder.io/t/symbol-input-incorrectly-rendered-on-the-server/2474/7 "2022-08-18T08:37:17Z")

</div>

Hi @ancheetah ,

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

Thanks,  
Vincent