Dynamic data not rendering

[lz82]

prerender-spa-plugin 3.x webpack 4.x

after all the other issues about dynamic data,request data,dynamic content, e.g #178 i still can't slove my problem..

my code

webpack.config

new PrerenderSpaPlugin({
    staticDir: path.resolve(__dirname, '../dist'),
    routes: ['', '/home', '/about'],
    render: new Renderer({
      renderAfterTime: 5000,
      headless: true,
      renderAfterDocumentEvent: 'render-event'
    })
  })

page code

mounted () {
      // this.$nextTick(() => {
        axios.get('https://api.github.com/users/lz82')
        .then(res => {
          this.pic = res.data.avatar_url
          this.url = res.data.url
          this.$nextTick(() => {
            document.dispatchEvent(new Event('render-event'))
          })
        })
      // })
    }

dist file

but there is only container is static html file but not dynamic data.

 <div id="app"><div data-v-68d85562="" class="container"><img data-v-68d85562="" src="" alt="">
  url:
</div></div>

[dimavolo]

Same problem here

[JoshTheDerf]

Remove renderAfterTime (you can only use one renderAfter* property) and try adding the data-server-rendered="true" attribute to your root app element.

[lz82]

@tribex 3q for you answer, i've tried that, but my problem still not solved. T_T

[JoshTheDerf]

The next thing to check is to see if the data is even being loaded from the server. Try with headless false.

On Sun, Sep 9, 2018, 11:24 AM lz ***@***.***> wrote: @tribex <https://github.com/Tribex> 3q for you answer, i've tried that, but my problem still not solved. T_T — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#249 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFlv-4ft3Yfr99rVOrzcV-kGUaKQ3N29ks5uZTK_gaJpZM4Wcq6o> .

-- *Web Developer & IT Professional* *Creation Ministries International *(US) <https://creation.com/> *Phone:* (770) 630-6154

[JoshTheDerf]

The next thing to check is to see if the data is even being loaded from the server. Try with headless false.

On Sun, Sep 9, 2018, 11:28 AM Joshua Bemenderfer ***@***.***> wrote: The next thing to check is to see if the data is even being loaded from the server. Try with headless false. On Sun, Sep 9, 2018, 11:24 AM lz ***@***.***> wrote: > @tribex <https://github.com/Tribex> 3q for you answer, i've tried that, > but my problem still not solved. T_T > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#249 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AFlv-4ft3Yfr99rVOrzcV-kGUaKQ3N29ks5uZTK_gaJpZM4Wcq6o> > . > -- *Web Developer & IT Professional* *Creation Ministries International *(US) <https://creation.com/> *Phone:* (770) 630-6154

-- *Web Developer & IT Professional* *Creation Ministries International *(US) <https://creation.com/> *Phone:* (770) 630-6154

[lz82]

@tribex thx ag~ 1. when i start a http-server in dist folder, i can find a ajax request in network.. i think the data is being loaded from server..
2. i've tried the "headless" config with "true" or false, it doesn't work 😢

[lz82]

btw, no matter the headless is true or false, when webpack is building, the chrome client did not appear.

(i'm sure the local-chrominum has installed success)

[chentianyuan]

Same problem here

[chentianyuan]

@lz82 have you solve the problem

[chentianyuan]

@tribex It seems to renderAfterDocumentEvent || renderAfterTime didn't wait my request send and then webpack build complate.

vue.config.js
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, './dist'),
        routes: ['/', '/about'],
        Renderer: new Renderer({
          // renderAfterTime: 5000,
          renderAfterDocumentEvent: 'render-event',
          headless: true
        })
      })
    ]
  }
}

prerender html with no dynamic data
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>test-prerender</title><link href="/js/about.f66ae57e.js" rel="prefetch"><link href="/css/app.fdfca5de.css" rel="preload" as="style"><link href="/js/app.6e1ecb49.js" rel="preload" as="script"><link href="/js/chunk-vendors.78fea8d0.js" rel="preload" as="script"><link href="/css/app.fdfca5de.css" rel="stylesheet"></head><body><div id="app"><div id="nav"><a href="/" class="router-link-exact-active router-link-active">Home</a> |
    <a href="/about" class="">About</a></div><div class="home"><h2></h2><p></p><span>——————</span><em>测试</em></div></div><script src="/js/chunk-vendors.78fea8d0.js"></script><script src="/js/app.6e1ecb49.js"></script></body></html>

[chentianyuan]

@lz82 did we should use options renderer but not render or Renderer .....hhh

[chentianyuan]

sorry, it is my falut @tribex
all things went correct

[lz82]

@chentianyuan u said all things went correct means using renderer property , dynamic data is loaded?

[lz82]

@chentianyuan 😭 i tried both renderer & Renderer, but, still doesn't work...

[chentianyuan]

@chentianyuan 😭 i tried both renderer & Renderer, but, still doesn't work...

try to remove the $nextTick，it seems to that prerender is async，and will execute after dom refresh

[lz82]

@chentianyuan thx your help~ i've tried remove $nextTick before emmit new Event('render-event'), it doesn't work..

but when i use renderAfterTime: 5000, it works.
if your project is using renderAfterDocumentEvent, can u push it to your repo? 😃

thank @tribex help~