prerender-spa-plugin pre rendered page is showing before js takes over

[cpereyra5199]

Hello, I recently updated my vue js project to use the new version of prerender-spa-plugin. After hours of testing I was able to get the rendering to work as expected. My routes are all rendered successfully. The only issue I am having now is that when I load a page in chrome for example. I see a flash of the pre rendered page before the js takes over and the page gets rendered again with fresh data. I have tried adding an all black overlay with a spinner to combat this as soon as the app starts but the html is served and visible for half of a second before the js takes over. I was under the impression that the rendered html was only visible to bots, is that not the case? Is there a way to make it show the html only if it is not from a browser possibly? Or maybe some other way of not making the rendered page show on load?

Below are the settings I am using for the plugin.

new PrerenderSPAPlugin( { staticDir: path.join(__dirname, '../dist'), routes: ['/', '/inventory', '/trade', '/carfinder', '/contact', '/finance/creditcenter', '/finance/calculator', '/finance/creditapp'], renderer: new Renderer({ renderAfterTime: 6000, headless: true }) } )

Any help would be greatly appreciated.

Thank you.

[sai-nagarjuna-t]

In react, I tried fixed this by the following piece of code in my index.js. This will however show that pre-rendered version for users as well. @cpereyra5199

const rootElement = document.getElementById('root');
if (rootElement.hasChildNodes()) {
  ReactDOM.hydrate(
    <App />,
    document.getElementById('root'),
  );
} else {
  ReactDOM.render(
    <App />,
    document.getElementById('root'),
  );
}

The ReactDOM.hydrate will persist the pre-rendered html and just add the event binders. In this way, it prevents the page from rendering from the second time

[JoshTheDerf]

@cpereyra5199 Have you added data-server-rendered="true" to your main app div?