'Flash' on rendered page when Vue takes over

Hello - I have two routes that are pre-rendered on build using the plugin (Using v3.1.0 with Vue 2.5.13)

Same issue as reported in #131 and #156: “When I load a prerendered page I first see the prerendered page, then the page becomes white again before being hydrated by vue.”

I’ve recorded a demonstration here: https://youtu.be/pOPl00bcEn4

In Issue #156 @Tribex says: “As for when the static page tells Vue to take over… Technically it doesn’t. At the moment Vue will just replace all the prerendered DOM when it loads. (If you add the data-server-rendered=“true” attribute to your Vue mount point during prerendering, it should hydrate the DOM instead of replacing it.)” .

I have tried this, but it doesn’t appear to change anything:

<div id="app" data-server-rendered="true"></div>

My config is as follows:

new PrerenderSpaPlugin({
      // Path to compiled app
      staticDir: path.join(__dirname, '../dist'),
      // List of endpoints you wish to prerender
      routes: [ '/' ],
      // Workaround for async
      renderer: new Renderer({
        renderAfterDocumentEvent: 'render-event'
      }),
      headless: true
    })

Any idea why data-server-rendered=“true” does not appear to work? Thanks!

[adrianolobo]

I did this to automate this process of adding data-server-rendered

     postProcess(context) {
       context.html = context.html.replace('id="app"', 'id="app" data-server-rendered="true"');
       return context;
     },

[assembledadam]

@epistemery: Just came back to this (bit longer than I originally mentioned to @Tribex because life) and I believe i’ve resolved the obvious ‘white flash’ issue.

I had already worked out @totomobile43’s initial step of separating pre-rendered routes with dynamic routes, but was still getting the issue. What ended up fixing it for me was dynamically inserting the data-server-rendered="true" attribute as @adrianolobo mentions above.

My plugin config is as follows (slightly altered for brevity):

    new PrerenderSpaPlugin({
      // Path to compiled app
      staticDir: path.join(__dirname, './dist'),
      // Output directory
      outputDir: path.join(__dirname, './dist/rendered'),
      // List of endpoints you wish to prerender
      routes: [ '/homepage', '/contact' ],
      postProcess(context) {
        context.html = context.html.replace('id="app"', 'id="app" data-server-rendered="true"');
        return context;
      },
      // Workaround for async
      renderer: new Renderer({
        renderAfterDocumentEvent: 'render-event'
      }),
      headless: true
    })

And then my nginx config (snippet). Note you could add additional pre-redered routes to the location ~ (^/contact) { directive.

# pre-rendered routes
location = / {
    try_files $uri /rendered/homepage/index.html;
}
location ~ (^/contact) {
    try_files $uri /rendered/$1/index.html;
}

# all other dynamic routes
location / {
    try_files $uri /index.html;
}

@Tribex: I think between this and @totomobile43’s solution, we’ve worked it out, so I’m going to close the ticket. Feel free to re-open if necessary. Thanks guys 👍