Running Custom Javascript SSR doesn't seem to work

Technical Questions
1

I’m trying to run some custom JS from within my symbol in SSR mode but can’t seem to get it to work.

I have an input field named product with the type map. I’m logging my api and it doesn’t seem to hit the endpoint at all and the state has no data.

Am I doing this correctly?

My code:

async function main() {
    if (Builder.isServer) {
        await fetch('/api/product?sku=MY_SKU')
        .then(res => res.json())
        .then(data => {
            state.product = data;
        });
    }
}

export default main();
2

Hi, @ismailp. Looking at your code, overall I think you are doing it correctly. One thing I noticed though is in the fetch you are using a relative url. The url needs to include the domain of your API as well so Builder can make the fetch call. Can you try await fetch('https://www.thedomainofyourapi.com/api/product?sku=MY_SKU')?

3

@korey ok got it, It’s pointing to localhost. Would that work?

Thanks!

4

That will not work, because localhost is not accessible on the public internet by the Builder servers. For now, you probably want to remove the Builder.isServer code and let the fetch happen client side, where the code will have access to your local server. Then, when you have deployed your API code, you can add back in the isServer check if you want to.

5

OK Cool,

Will try it out. Appreciate the help!

Best,
Ismail

6

@korey I set an absolute URL but still get no hits to the API when doing SSR. Works on the client though.

Here’s the url to the symbol: https://builder.io/content/bb318e2eb7b34ec2876744c1137afe1a

Also you preview it the SSR version here: https://hs.mersenne.now.sh/test-ismail and the client side version here: https://hs.mersenne.now.sh/b/test-ismail

Code I’m running now is:

async function main() {
    await fetch('https://hs-git-product-api-endpoint.mersenne.now.sh/api/product-widget?sku=LEATHER_PURSE-BLACK_LANDSCAPE')
        .then(res => res.json())
        .then(data => {
            console.log(data);
            // set the data on the state object so you can access it from your components
            state.product = data;
        });
}

export default main();
7

Any updates on this @korey?

Thanks!

8

@ismailp, I just took a closer look and I am not sure exactly why the code is not setting state on the server. However, I think it might be a bug that will take some more time to investigate. Hopefully you can use the client side solution for now, and I will let you know when we fix the issue.

9

@korey unfortunately we are running the AMP model and can’t run any client side JavaScript on our builder pages.

@steve8709 any way you guys could prioritize this?

Thanks!

10

@ismailp that makes sense. Sorry if my last post was not clear: we are currently investigating, so as far as priority goes it is prioritized :smile:

11

@korey awesome! :slight_smile:

12

@ismailp, looks like we have been able to pinpoint the issue. We hope to be able to deploy the fix tomorrow, and we will let you know when it is live.

13

@korey you guys are the best!

14

We released a fix earlier for the API side, I’m still seeing an issue where only when you’re editing the ssr content is not hydrated properly, I’m investigating this, but otherwise live content should be fixed.

15

@aziz ok will test it out and see!

Best,
Ismail

16

Hi again!

Running async functions i the custom JS still doesn’t run properly on SSR @aziz.

Could have a look and fix please?!

17

Hi @ismailp , please point me to a content link with reproduction and I’ll take a look.

18

Hi there @aziz. Here you go: https://builder.io/content/350f24762e8d48c3adea91b5e753d8be

19

The content you linked seem to be working fine to me, please let me know what’s it that’s not working from the Builder side.

20

It’s not working. I have a custom function that updates the state. This function should be run on the server side. It’s not so this is still an issue @aziz