ajax asynchronous data？

[chenweihan]

ajax asynchronous data？

Hi,

The prerendering will basically load all code "in the flow" that includes synchronous instructions, promises, async/await but not asynchronism handled by callbacks.

You can promisify your async call like so :

let delay = ms => new Promise(r => setTimeout(r, ms));
delay(2000).then(() => {
     //return some date into dom
})

If not, you will have to use advanced configuration like explained in the README such as :

waiting for your call to be finished, say 2500ms on your exemple :

captureAfterTime: 2500

or, since you said that your callback insert DOM, you can wait for an element to be present in the DOM

setTimeout(function() {
     document.body.id = "content"
}, 2000);

and use this option in the module configuration :

 captureAfterElementExists: '#content'

Finally, you can fire an event when your callback is done like so :

setTimeout(function() {
     document.dispatchEvent(new Event('custom-post-render-event'))
}, 2000);

and use this option in the module configuration :

captureAfterDocumentEvent: 'custom-post-render-event'

I hope it will help

[chenweihan]

Hi @jnrdt:
Thank you for your advice
I want to say is the asynchronous load is normal, but ajax callback is can't, the ajax use the agent and I can confirm ajax can return data.
I think whe the compile, ajax url is not correct request in prerender-spa-plugin.

 if (xhr.readyState == 4) {
        document.getElementById("test").innerHTML = xhr.status;   //0 in prerender-spa-plugin  in static html
        if (xhr.status == 200) {
            document.getElementById("ajax").innerHTML = xhr.responseText;
        }
    }

We detailed test ajax. in the browser xhr.status return 200, but the XHR. Status return 0
in prerender-spa-plugin.

Hi,

The API have to consider a call made by the plugin, eg PhantomJS : its user agent, the origin that is probably localhost....

You have to make it work in these particular conditions. If you can, take a look at the server side log to see the incomming http headers, and the reason why it's failing.

[chenweihan]

Hi @jnrdt
Yes，We found the reason.
When compiling， the prerender-spa-plugin use Hapi to new start Server and cross-domain API request.

code:
.....
Server.start(function (error) {
// If port is already bound, try again with another port
if (error) return serveAndPrerenderRoute()

      var maxAttempts = options.maxAttempts || 5
      var attemptsSoFar = 0

      var phantomArguments = [
        Path.join(__dirname, 'phantom-page-render.js'),
        'http://localhost:' + port + route,  // http://localhost:8000
        JSON.stringify(options)
      ]

.....