Hi!
I have many symbols, which are used with multiple data models, which are bind as reference in to my symbol:
Here is my symbol, and as you can see the state holds my data:
And with this id, I will fetch my data from the API in the custom JS section:
* for more information on writing custom code
*/
async function main () {
if (Builder.isServer) {
let id=state.hero.id
fetch('https://cdn.builder.io/api/v2/content/table-data?apiKey=32f148657e2646be8562eb4e6ebfa190&query.id=' +id + '&limit=1&includeRefs=true')
.then(response => response.json())
.then(data => state.result=data);
}
}
export default main();
But because I don’t want to lose SSR, i put that into the if(Builder.isServer), but it does not work, and the data won’t be fetched.
If I modify for browser it works and the state holds my data:
async function main () {
if (Builder.isServer || Builder.isBrowser) {
let id=state.hero.id
fetch('https://cdn.builder.io/api/v2/content/table-data?apiKey=32f148657e2646be8562eb4e6ebfa190&query.id=' +id + '&limit=1&includeRefs=true')
.then(response => response.json())
.then(data => state.result=data);
}
}
export default main();
We use Nextjs for the site SSR, we fetch all the pages we need, so the data on the page should be ready when we open the browser
Then on the page it looks like it is fetching the data (in the symbol) before rendering it:
After the symbol loaded the data:
(Btw the navbar is loaded from nextjs code, and the logos are custom react components, these are not symbols)
Why is my data not rendered on the SSR, why we need to add the (|| Builder.isBrowser)?
Which is pretty bad for seo optimalisation and performance issues.
Please let me know, because this is a crucial point in our production app.
