Understanding Prerendering (with Vue.js and Prerender SPA Plugin)

I had a hard time understanding prerendering, in my case done with vue.js and and the prerender spa plugin.
Technically it was working but I did not understand how google and others handle it.

After reading and testing quite a bit, I think I got it now:

let’s assume we have following files and routes:

• .htaccess
• index.html (the dynamic vue.js)
• static (folder – the dynamic vue.js stuff)
• contact (folder – prerendered stuff)
  • index.html (prerendered)

then there would be the route “about” which was not prerendered.

If I made changes to the content of a page (via a cms) after it was prerendered and I open up that page I could see the changes. So far so good, but what really confused me was that if I looked at the source code I saw the prerendered content without the changes.

So this means: if a prerendered route is opened in the browser, initially the prerendered content will load. Then immediately the vue.js magic kicks in and replaces the content with the dynamic content.

For bots not using Javascript, they will see the static prerendered content.

If a certain route has a prerendered page, this page will load. If not, e.g. for the route “about” it will fall back to the vue.js index.html loading the content dynamically – this is handled via the .htaccess file (https://router.vuejs.org/en/essentials/history-mode.html)

To optimize the prerendered pages for the bots, they should not use javascript links but standard hrefs. Also hidden content should be avoided – for me the content was hidden by the vue.js (https://vuejs.org/v2/guide/transitions.html) which basically added opacity:0 to the element which would then be removed by js after loading. But without js opacity is always 0. I read somewhere that a bot might still index the hidden content but lower it’s rating compared to a visible content.

In the end I removed the transition classes during the pretender process in Prerender Spa Plugin settings in the webpack config:

renderedRoute.html = renderedRoute.html.replace(
/fade-enter fade-enter-active/g,
''
)