Comments (4)
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
from prerender-spa-plugin.
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.
from 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.
from prerender-spa-plugin.
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)
]
.....
from prerender-spa-plugin.
Related Issues (20)
- Plugin creates broken HTML HOT 1
- Puppeteer Issues on Oracle Linux 8 HOT 2
- Optimization of Puppeteer
- I have a Vue multi-page app, after prerender, all html files look the same. HOT 1
- render each route to an html file
- Only two pages are getting pre-rendered properly
- How to cache the result.
- docker
- on Safari and ios it doesn't always work
- [prerender-spa-plugin] Unable to prerender all routes! HOT 4
- How to configure puppeteer inside prerender-spa for Heroku
- How to launch puppeteer with { args: ['--no-sandbox'] }?
- "/" page flashing before routes load
- Unexpected token '?' with plugin only HOT 2
- Looking for maintainers! HOT 15
- Error during building example app: probably smth with websocket errno: -4039, code: 'ETIMEDOUT'
- Vue Prerender-SPA / Webpack - Application won't initialise with named cacheGroups unless explicitly listed in pages config chunks section?
- why no such file or directory
- Unable to prerender all routes! HOT 2
- Page refresh twice
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from prerender-spa-plugin.